Jump to content
Search Community

Animated nested divs within the pinned section

invrt test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hey guys,

 

I've been trying to get something really basic going, but been struggling for a couple hours.  

 

I have my pinned section: .test-section.

 

My pinned section has a bunch of children that I would like to animate as you scroll. At the moment it seems like I can only see the first child within the pinned section. Preferably, I would like to this dynamically.  So for each div.content inside .test-section, animates.

 

From my codepen you can see that it's only animating the first div and I'm not sure how to get the rest to show up. 

 

Any ideas?

 

 

See the Pen WNZPQzv by codenameorange (@codenameorange) on CodePen

Link to comment
Share on other sites

Hi invrt,

 

You are nesting ScrollTriggers inside your timeline which is a big mistake.

 

You should only have 1 ScrollTrigger per timeline.

gsap.timeline({
  scrollTrigger: {
    ...
  }
})

 

Outside of that, I'm not exactly sure what you are going for here as your other content sections are not even visible because of your CSS, so animating y 100 is not going to do much.

 

image.png

 

Have you check out or ScrollTrigger demos page? Perhaps there is something similar to what you are trying to achieve on there.

 

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

 

There are also a bunch of demos listed on the ScrollTrigger docs. And we have some ScrollTrigger collections on CodePen.

 

ScrollTrigger How-To Pens - a Collection by GreenSock on CodePen

 

ScrollTrigger Showcase - a Collection by GreenSock on CodePen

 

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...