Jump to content
GreenSock

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

Using ScrollTrigger class change inside pinned section

Recommended Posts

Hi, I have a pinned section that when it gets to the end of the pinned section, I want it to stay pinned while I pass the active class from one div to another via user scroll or a timer, when it is passed to the last div I then want it to un-pin and continue on down the page as normal. Has anyone done something like this or have seen an example they could point me to? I appreciate your help!

See the Pen eYeYKog by jenstarr (@jenstarr) on CodePen

Link to comment
Share on other sites

@elegantseagulls ok, I see that part that toggles the class when the .box-3 class is triggered, but what I want to try to do is have the purple section hold, while the user scrolls and active class is toggled between different divs, then at the end continue on. It would kind of function like a slider, so imagine you scroll to the purple section, there is an image and text slide, as the user scrolls the active class is passed to the next "slide" until the end, then it continues on.

Link to comment
Share on other sites

Just to be clear, the only time containerAnimation is useful is when you're trying to trigger things based on their HORIZONTAL movement that's driven by a GSAP animation rather than an actual horizontal scroll. Sorta like "when my element enters the viewport horizontally...." in a vertical-scroll-driven ScrollTrigger animation. 

 

You cannot make something stay pinned beyond its end position. In other words, a ScrollTrigger's pinning will apply during the entire time that ScrollTrigger is active (while the scrollbar is between its start and end values). You can't say "stay pinned until I tell you to unpin manually". But honestly, that's almost never necessary anyway - I think it's just a matter of you setting things up properly with the start/end positions. And if you want to "pass a class to a different div" (not sure exactly what you mean), you can just set that up to fire at the appropriate scroll position (before the end). Like if you've got a 10-second timeline set up with scrub: true, and you want it to switch classes 20% before the end, just add a callback at the 8-second spot of your timeline. Or set up a whole different ScrollTrigger to fire an onEnter at whatever point you want to do what you need to do. It should be entirely possible without resorting to trying to manually pin/unpin things like that. 

  • Like 1
Link to comment
Share on other sites

@GreenSock ok so keeping it pinned and telling it "move this class around" isn't possible, unless I do it through timeline, so doing it similar to this example? My goal is to have the .slideBkg and .slideText in my example to swap active state on scroll or after an amount of time has passed.

 

See the Pen bdc810c05da8df823aac22403b34321b by akapowl (@akapowl) on CodePen

Link to comment
Share on other sites

1 hour ago, jenstarr said:

so keeping it pinned and telling it "move this class around" isn't possible, unless I do it through timeline, so doing it similar to this example?

Sure it is. Like I said, either drop it into your timeline -OR- create a separate ScrollTrigger that'll fire when you want that to happen. 

 

If you want it to happen a certain amount of time after your current ScrollTrigger becomes active, that should be as simple as using an onEnter/onEnterBack or onToggle to fire a gsap.delayedCall() that does your class-swapping. 

 

I really don't know exactly how you're trying to coordinate things, so I can't tell you the "best" way but hopefully these hints get you moving in the right direction. What you're describing sounds totally doable. 

Link to comment
Share on other sites

Quote

that should be as simple as using an onEnter/onEnterBack or onToggle to fire a gsap.delayedCall() that does your class-swapping.

ok, what if all the divs I want to swap the class between are all in the viewport already. They are absolute positioned on top of each other, and I want to essentially swap .active to make them change opacity as the user scrolls, until the last one, then move on. I would still want to do it in reverse like onEnterBack, but they are all in viewport at same time, in same location. 

Link to comment
Share on other sites

No problem! Just set up a timeline that fades them all exactly as you described (don't worry about the scrolling yet). Then once you've got that, wire it up to a ScrollTrigger - put one on that timeline, set scrub: true, and pin the container element (container of all those divs). It should be pretty straightforward but if you get stuck just post your minimal demo here (like a 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.
×