Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
invrt

Animated nested divs within the pinned section

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

Hi Blake,

 

This one here is like 90% of the solution I guess? 

See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen



Though, I don't really want to use bodyScrollbar stuff,  or the picture on the side. Just want the words with opacity animated. 

Link to comment
Share on other sites

Lifesaver.  Thanks so much. 

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.
×