GIZEH

Animations

In this project, I took care of all the components that had animations and interactions; ranging from scroll animations to buttery smooth infinite loops. I used the animations library GSAP, which greatly simplified the process thanks to its powerful timeline system.

This allowed me to create animations on a timeline, making it quick to adjust keyframes and timings while easily incorporating designer feedback.

When the timeline was done I used the ScrollTrigger to make the animation play on scroll. The ScrollTrigger config looked something like this:

timelineScroll.current = gsap.timeline({
  scrollTrigger: {
    trigger: ".heroAnimationSpecial",
    start: "top",
    end: "+=300",
    pinSpacing: "margin",
    anticipatePin: 1,
    scrub: 2,
    //usefull for debugging
    markers: true,
  },
});

Changing the start and end position is very fast and we can even configure the smoothing making scroll animations a breeze.

Smooth loop animations

Many components featured loop animations where the content slid from right to left. In these cases, I prefer handling the animation with CSS as it is often the most performant and straightforward solution. To do so I used TailwindCss and added the keyframes and animations to the config:

//tailwind.config.ts
keyframes: {
    slide: {
        '100%': {
        transform: 'translateX(-50%)',
        },
    },
},
animation: {
    loop: 'slide 12s linear infinite both',
    },

Duplicating the content and adding the loop class to the container creates the desired effect.

Contact

I’ll leave it at that. If you’d like to know more about the project or have a chat, feel free to reach out to me at: bernasca9@gmail.com