Jump to content
Search Community

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

rremus test
Moderator Tag

Recommended Posts

Hey rremus and welcome to the GreenSock forums!

 

2 hours ago, rremus said:

i'm interested if i could make the images behave like in the video?

Definitely! Upon first viewing the video, I'd be inclined to setup the image, title, and materials for each section in their own container. Then when the arrows are clicked translate and fade in the container, optionally with an additional delayed translate and fade of the image. Then do the line animation.

 

We're happy to help with specific questions if you get stuck :) 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

You've got a lot of tweens there :) I'm surprised you need so many. You might find GSAP's defaults useful to save you time typing and updating things. In this case I think ease: "circ" would be a smart default for the timeline.

 

It's pretty hard to help by just looking at code. How about you try to create a minimal version of the same sort of setup and then include that along with a description of what's going wrong? This thread talks more about how to do so:

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...