Jump to content
GreenSock

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

How to animate a single element through a page with GSAP and ScrollMagic

Recommended Posts

Hi there, can anyone help me please?

 

I have a page with a div that has a fixed position. I'd like to animate the element inside the div with GSAP when you scroll through the sections on the page with ScrollMagic.

 

I am able to make the object move when you enter a section and when you scroll back it is reversed. How can I make it so that the object moves from it's current position to a new position when the user scrolls into the next section? I'd like the element to keep changing position when you enter a different section.

 

I've seen many examples of GSAP and Scrollmagic in action but I'm struggling to find any examples that animate a single element through.

 

A simple Codepen example is attached.

 

Thanks.

See the Pen erZvpG by cbg (@cbg) on CodePen

Link to comment
Share on other sites

You can do that by using multiple scenes for different sections. But it can get complex with too many unexpected behaviors. I will say avoid using from tweens unless you know how the immediateRender works, check the following video.

 

 

You can use to tween instead to avoid complexities. For example the following demo works without any issues,

 

See the Pen vjGxMN?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

Then following demo with from tweens shows some unexpected behavior, it will make sense once you watch the video.

 

See the Pen ELKmYJ?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Hi Sahil, just wanted to say thanks. This really helped me out!

  • Like 2
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.
×