[Is there a possibility to achieve this kind of animation with GSAP ? If yes, how?]

thank you guys! @mikel @zachsaucier

 

[Is there a possibility to achieve this kind of animation with GSAP ? If yes, how?]

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

[Transition between sections]

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

[Is it possible to achieve this kind of animation with 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})
        }
      },

 

[Is it possible to achieve this kind of animation with GSAP?]

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 !