ScrollTrigger Vs ScrollMagic: Repeated section elements animation

[vino3d 0 Likes (Newbie)]

Hi folks,

 

I've been using scrollmagic for my scroll based animations. And I've just started to learn GSAP ScrollTrigger.

 

With Scrollmagic, I've achieved a scroll animation as seen below.

 

It has 3 sections with repeated elements - a title, paragraph and a image for each section. I've used two  separate timelines for scroll in and scroll out actions.

 

I'd love to learn, how this exact same animation is done in with scrollTrigger?

Is there a easy way to do this using

ScrollTrigger?

 

Thanks GSAP team for ScrollTrigger and the great support to this community.

 

See the Pen zYrXwQo by vino3d (@vino3d) on CodePen

[Ihatetomatoes 325 Likes (Leader)]

Hi @vino3d, welcome to the forum.

 

Of course what you could do with ScrollMagic you can now do with ScrollTrigger and much more.

 

As you mentioned that you are trying to learn I would direct you to the ScrollTrigger starting guide by @Carl.

 

It has few simple demos that would get you started, I think that is the best way to learn.

 

By building few simple demos with ScrollTrigger you will see how animations are triggered and you will be able to build the animation as in your example in no time.

 

I have also GreenSock 101 online course that covers the basics of GSAP3 and ScrollTrigger that might help.

 

Cheers

Petr

[ZachSaucier 7,132 Likes (Superhero)]

Hey vino and welcome to the GreenSock forums.

 

Here's one of the many ways to set it up:

See the Pen jOWRRgK?editors=0010 by GreenSock (@GreenSock) on CodePen

[vino3d 0 Likes (Newbie)]

@ZachSaucier

Thanks for the warm welcome.

 

Wow !! That is awesome. Really that simple.?!  Thanks for sharing your knowledge.

[vino3d 0 Likes (Newbie)]

@Ihatetomatoes thanks. I'll go through the docs.