Merge pull request #757 from Vizzuality/fix/homae-banner-animation

Home banner: improve animations
Vizzuality · Jan 17, 2022 · 6827279 · 6827279
2 parents 466d0a6 + b0cafb8
commit 6827279
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 20 deletions.
diff --git a/app/layout/home/banner/component.tsx b/app/layout/home/banner/component.tsx
@@ -15,27 +15,27 @@ const claimLines = [{ id: '0', text: 'free and open' }, { id: '1', text: 'flexib
 
 export const HomeBanner: React.FC<HomeBannerProps> = () => {
   return (
-    <div className="py-10 md:py-32 bg-gray-500" style={{ background: 'radial-gradient(circle at 50% 60%, rgba(54,55,62,1) 0%, rgba(17,17,17,1) 51%)' }}>
+    <div className="py-10 bg-gray-500 md:py-32" style={{ background: 'radial-gradient(circle at 50% 60%, rgba(54,55,62,1) 0%, rgba(17,17,17,1) 51%)' }}>
 
       <Wrapper>
         <div className="flex flex-col items-center -space-y-20 md:space-y-20">
           <div>
-            <h5 className="text-center md:text-left text-5xl md:text-6xl leading-14 md:leading-10 font-heading">Marxan software is</h5>
+            <h5 className="text-5xl text-center md:text-left md:text-6xl leading-14 md:leading-10 font-heading">Marxan software is</h5>
             <div
               className="relative h-52 md:h-40"
               style={{ clipPath: 'polygon(0 5%, 100% 5%, 100% 45%, 0 45%)' }}
             >
-              <div className="absolute flex flex-col items-center w-full max-w-4xl animate-banner text-primary-500">
+              <div className="absolute flex flex-col items-center w-full max-w-4xl mt-5 animate-banner text-primary-500">
                 {!!claimLines.length && claimLines.map((cl) => (
-                  <p className="text-center md:text-left mb-18 md:mb-16 text-4xl md:text-5xl" key={cl.id}>{cl.text}</p>
+                  <p className="text-4xl text-center md:text-left mb-18 md:mb-16 md:text-5xl" key={cl.id}>{cl.text}</p>
                 ))}
               </div>
             </div>
           </div>
 
           <div className="relative grid justify-between w-full grid-cols-1 md:grid-cols-3 gap-y-12 md:gap-y-0 md:gap-x-6">
             <div
-              className="absolute -top-10 md:-top-20 -left-10 md:-left-18 w-full h-full bg-no-repeat bg-gradient-to-b from-current to-transparent opacity-50 hidden lg:block"
+              className="absolute hidden w-full h-full bg-no-repeat opacity-50 -top-10 md:-top-20 -left-10 md:-left-18 bg-gradient-to-b from-current to-transparent lg:block"
               style={{
                 backgroundImage: `url(${BANNER_BACKGROUND})`,
                 backgroundSize: '34%',

diff --git a/app/tailwind.config.js b/app/tailwind.config.js
@@ -180,7 +180,7 @@ module.exports = {
       ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
       pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       bounce: 'bounce 1s infinite',
-      banner: 'banner 6s linear infinite',
+      banner: 'banner 6s cubic-bezier(0, 0, 0.2, 1) infinite',
     },
     backgroundColor: (theme) => theme('colors'),
     backgroundImage: {
@@ -553,28 +553,34 @@ module.exports = {
       },
       banner: {
         '0%': {
-          marginTop: '20px',
+          transform: 'translateY(0%)',
         },
-        '15%': {
-          marginTop: '20px',
+        '11.11%': {
+          transform: 'translateY(0%)',
         },
-        '30%': {
-          marginTop: '-90px',
+        '22.22%': {
+          transform: 'translateY(0%)',
         },
-        '45%': {
-          marginTop: '-90px',
+        '33.33%': {
+          transform: 'translateY(-33.33%)',
         },
-        '60%': {
-          marginTop: '-90px',
+        '44.44%': {
+          transform: 'translateY(-33.33%)',
         },
-        '70%': {
-          marginTop: '-210px',
+        '55.55%': {
+          transform: 'translateY(-33.33%)',
         },
-        '85%': {
-          marginTop: '-210px',
+        '66.66%': {
+          transform: 'translateY(-66.66%)',
+        },
+        '77.77%': {
+          transform: 'translateY(-66.66%)',
+        },
+        '88.88%': {
+          transform: 'translateY(-66.66%)',
         },
         '100%': {
-          marginTop: '-10px',
+          transform: 'translateY(0%)',
         },
       },
     },