Animated Text Elements inside pinned section / Scroll Trigger

[aaronmeder]

Hi there!

Thanks a lot first for creating this library! I am only starting to using it more often but love how easy it can make powerful, performant transitions.

This is my first time using ScrollTrigger however and I am unsure how to use it in a good way for my use case. I've spent a few hours on trying to put this together but did not get it fully working and hope that some of you can guide me in the right direction.

 

What I am trying to achieve

1. Once Section Two ('section .two') reaches the middle of the viewport it should be pinned.
2. After that the text elements on the right of Section Two ('.stepped-animation .single-step') should fade in / out one after another when I scroll further. There should be a "direct" transition to the next text element, meaning for example it shouldn't stop during animation at opacity 0.5 of a text element (I tried to achieve this using snap). The last one should stay visible when I scroll on.
3. After the last text element is shown and the user scrolls further the Section Two should be unpinned and it should scroll on further to the next section (no need to snap to the next section, just go on).

 

What I could do so far

As you can see in the codepen I've somehow got it to work, but:

• I've manually added the transitions for the text elements and durations (see stepsTimeline) which is not a plausible way The number of text elements can vary.
• Somehow the whole Section Two now also snaps in place, which is not really what I intend. It should just normaly scroll into place until it is pinned without the snapping.
• Less important, maybe a second question: I would like to get rid of the white space above / below the pinned section but also do not want the following content to go under the pinned section (what happens when I disable pinSpacing).

 

A few thoughts on how I tried to achieve the solution

Two scroll triggers:
- one that pins / unpins the Section Two

- one that goes through the text elements and shows / hides then when the time is right

 

I feel like there is probably a better way on how to setup the whole thing and maybe use ScrollTrigger it in another way combined with timeline - but I cannot see it 😓

 

Thanks for any help!

Aaron

 

See the Pen vYZGyJq by aaronmeder (@aaronmeder) on CodePen

[GreenSock]

Here's how I'd probably do it: 

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

 

A few notes:

• If you don't want that space to show underneath (pinSpacing), you could just wrap everything in a container <div> and pin THAT instead. 
• You don't need to apply snapping in order to prevent things from stopping on a partially-transitioned state. Instead, just place callbacks along the timeline that fire when the playhead passes them, and in that callback you'd fire independent animations. That way, they play completely independently from the scrubbing timeline, so they'll always finish regardless of where the user stops scrolling. 

Does that help? 

[aaronmeder]

@GreenSock that is amazing - exactly what I wanted to achieve! Thank you for showing up a good way to solve this 🙌🏻

 

Let me add this compliment to you and all other users: when I was searching for solutions yesterday and was looking through this forum there were so many posts that showed people helping others very generously and hands-on like this one. This is a fantastic community here!

I hope to dig deeper and also be of help in the future

[Cassie]

This is the feedback we like to hear!

[GreenSock]

9 hours ago, aaronmeder said:

@GreenSock that is amazing - exactly what I wanted to achieve! Thank you for showing up a good way to solve this 🙌🏻

 

Let me add this compliment to you and all other users: when I was searching for solutions yesterday and was looking through this forum there were so many posts that showed people helping others very generously and hands-on like this one. This is a fantastic community here!

I hope to dig deeper and also be of help in the future

Aw, that's really nice to hear. We put a ton of effort into these forums - not just answering all the questions but cultivating a very particular vibe, so it's rewarding when that's noticed. Thanks so much, @aaronmeder. 

 

Glad the solution was helpful. 🙌 Good luck on your learning adventure. I think the more you work with GSAP/ScrollTrigger, the more empowered you'll feel. Get your cape ready  

 

9 hours ago, aaronmeder said:

and also be of help in the future

We LOVE when people hang around and help other people around here. It's probably the single best way to learn yourself (when you try helping others). And don't feel like you need to have all the right answers - just give it a try. The other moderators often chime in with tips or different approaches. It's a collaborative thing. Nobody is like "your answer wasn't as good as it could be - we're kicking you out". I'm sure you've picked up that we've got a positive vibe around here. The more people helping, the merrier.