Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

rremus

Members
  • Posts

    5
  • Joined

  • Last visited

Posts posted by rremus

  1. 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})
            }
          },

     

×