rremus

thank you guys! @mikel @zachsaucier

https://drive.google.com/file/d/1Zli6PZJp17Cxrbvxg-DatQffDxp32clx/view

@mush did you find a solution for this kind of behavior using GSAP ?

Thank you for your answer @ZachSaucier, I think i'm getting closer to the desired result. For now I have this code over here but i cannot achieve the overlapping element that is coming after the first one with a fading effect (as in the video above). Some thoughts on this ? gsapAnimate(direction) { const tl = gsap.timeline(); tl.set('.carouselImg', {opacity:1, x:0}) tl.set('.customLineBlue', {opacity:0, x:0}) if (direction === 'left') { tl.from('.carouselImg', {opacity: 0,x:-40, ease: "circ", duration :.3}) tl.to('.carouselImg', {opacity: 1,x:0, ease: "circ", duration :.3}) tl.from('.customLineBlue', {opacity: 0,x:-40, ease: "circ", duration :.2}, "-=0.3") tl.from('.carouselInfo', {opacity: 0,x:-40, ease: "circ", duration :.2}, "-=0.3") tl.from('.loadingLine', {keyframes: [ {duration: 0.2, scaleY: 0, y: -20, ease: "circ"}, {duration: 0.5, scaleY: 1, y: 0, ease: "circ", delay: 0.2}, ]}, -0.1) tl.from('.loadingLineHorizontal', {keyframes: [ {duration: 0.2, scaleX: 0, x: -80, ease: "circ"}, {duration: 0.5, scaleX: 1, x: 0, ease: "circ", delay: 0.2}, ]}, -0.1) tl.from('.brukt', {opacity: 0.6, ease: "circ", duration: 0.3}) } else { tl.from('.carouselImg', {opacity: 0,x:40, ease: "circ", duration :.3}) tl.to('.carouselImg', {opacity: 1,x:0, ease: "circ", duration :.3}) tl.from('.customLineBlue', {opacity: 0,x:40, ease: "circ", duration :.2}, "-=0.3") tl.from('.carouselInfo', {opacity: 0,x:40, ease: "circ", duration :.2}, "-=0.3") tl.from('.loadingLine', {keyframes: [ {duration: 0.2, scaleY: 0, y: -20, ease: "circ"}, {duration: 0.5, scaleY: 1, y: 0, ease: "circ", delay: 0.2}, ]}, -0.1) tl.from('.loadingLineHorizontal', {keyframes: [ {duration: 0.2, scaleX: 0, x: -80, ease: "circ"}, {duration: 0.5, scaleX: 1, x: 0, ease: "circ", delay: 0.2}, ]}, -0.1) tl.from('.brukt', {opacity: 0.6, ease: "circ", duration: 0.3}) } },

Hey guys ! I'm new to this awesome tool called GSAP and I have to achieve this animation: https://drive.google.com/file/d/1LgezPQLudZNBGkq1LfG8KjLiEC_TCl8x/view I've already made a part of it , but i'm interested if i could make the images behave like in the video? Some tips would be great :) Have a nice day !