Universal ScrollMagic function

[richardwiggins 0 Likes (Newbie)]

Hey all!

 

I'm VERY new to GSAP and ScrollMagic but now using both in some capacity.

 

I was wondering if anyone can help me as I want to create a universal ScrollMagic function/controller to then trigger my already created GSAP animations at the correct point on scroll.

 

I'm really hoping this can be done so I can maybe include a class (like 'animate-me') in the HTML which then triggers the animation when scrolling past.

 

A lot of this will be content managed to it need to flexible.

 

I've done this in the past using the more simple WOW.js, obviously not with GSAP though.

 

Cheers,

 

Richard

[retropunk 126 Likes (Specialist)]

Check out Petrs tutorials

https://ihatetomatoes.net/blog/

 

He's the current authority on ScrollMagic/GSAP integration

[richardwiggins 0 Likes (Newbie)]

Thanks. I have seen some but from what I gathered none looked like they were "universal" and were being setup on a per scene basis.

[Carl 9,066 Likes (Superhero)]

I'm still having a hard time understanding what you mean by universal. It might help to see a simple demo showing something that works the way you want it and perhaps we will have a better idea about it being made universal.

 

Our support is very focused on the GSAP API and we don't consider ourselves to be experts with scrollmagic.

[Ihatetomatoes 147 Likes (Specialist)]

Hey Richard, I think I know what you mean. I will create a short video explaining how to setup "universal" tweens that can be used for dynamically generated content.

 

I am almost done with the video, just need to complete the editing.

 

I will publish it on my YouTube channel and post it also here.

 

Stay tuned.

[richardwiggins 0 Likes (Newbie)]

Thanks Petr, really appreciated and look forward to it!

[Ihatetomatoes 147 Likes (Specialist)]

Hi Richard, here is the promised video:

 

 

Let me know if you have any other questions, hope it helps.

 

Cheers

Petr