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

[cbg 3 Likes (Newbie)]

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

[Sahil 2,541 Likes (Superhero)]

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

 

[cbg 3 Likes (Newbie)]

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