Animate based on scroll position

[johncolumbo]

Hello everyone, 

 

I'm new here and new to GSAP (just signed up for Club Greensock last week). I am working in Angular 6 and am trying to animate things based on scroll position. I tried using ScrollMagic, but cannot get it to work in my Angular 6 project no matter what I try. 

 

Is there a solid and easy to understand step by step tutorial somewhere on how to use ScrollMagic in Angular 6? There are some posts here and there, but the steps are not clear. I can't be the only person struggling with this.

 

I'm not dead set on using ScrollMagic as long as I can make something animate when the user hits a certain scroll position. 

I would add a codepen, but I'm not confused on how to use GSAP or ScrollMagic, it's just the adding of ScrollMagic to my Angular 6 project or animating based on scroll position some other way within GSAP. 

 

Thank you for any help you can provide. 

Oh and thank you for Greensock, it is incredible. 

[Carl]

Hi and welcome to the GreenSock forums,

 

I'm not familiar with Angular 6, so I'm not sure what (if any) restrictions it will impose. 

However, at its core, all ScrollMagic is doing is using the scroll position to change the progress() of an animation... usually a TimelineLite that has many nested timelines (scenes).

 

Please read the posts from @OSUblake in the thread below. Be sure to look at his demo too

 

 

[johncolumbo]

Carl, 

 

Thank you! Going through the thread you referenced showed me that I don't need to use ScrollMagic at all. I'm still working on implementing this method into my Angular 6 project, but this has me moving forward, so thank you. 

 

Thanks to OSUblake for 

See the Pen a633d0c9e6e2b951496d7f1eb4fd8fb6?editors=0010 by osublake (@osublake) on CodePen

 mentioned at the end of the above thread which demonstrates doing the same thing that ScrollMagic does with only GSAP.