ScrollTrigger within a Scene

[TGC]

Hi There,
 

I'm new to Greensock and ScrollMagic, so I'm struggling with something I'm attempting to do and would appreciate some guidance.

Below is what I currently have:

https://codepen.io/Submission12/pen/WNagjYz

 

I'm trying to implement this:

See the Pen rNOebyo by GreenSock (@GreenSock) on CodePen

when a user scrolls to Section 2. I'd like to show each element within scene2 with the scrollTrigger animation and then only scroll to scene3.
 

<section id="scene2" class="panel turqoise">
  <div class="box">
    This is Section 2
  </div>
  <div class="element1">This is Section 2a</div>
  <div class="element2">This is Section 2b</div>
  <div class="element3">This is Section 2c</div>
  <div class="element4">This is Section 2d</div>
</section>

 

Thank you!

 

 

See the Pen WNagjYz by Submission12 (@Submission12) on CodePen

[Rodrigo]

Hi,

 

Any particular reason to use GSAP 2.x and ScrollMagic. GSAP now has the ScrollTrigger Plugin and we're currently on version 3.

 

I recommend you to check the docs:

 

Also go through this video:

Finally check the ScrollTrigger demos page:

https://greensock.com/st-demos/

 

And these collections:

https://codepen.io/collection/AEbkkJ

 

https://codepen.io/collection/DkvGzg

 

Hopefully this is enough to get you started.

Happy Tweening!