Exit animations while keeping scroll snapping

[M. Jardel]

Hi there,

 

I'm trying to build a page of multiple full-page sections - and animate each of them with entrance and exit animations. 

 

But since I'm also using snap-scroll - and I'd like to keep it - I cannot see my exit animations because by the time they ran, we're already at the next section - so we cannot see it.

 

Thanks in advance

See the Pen WNzMdKB by djarum-black (@djarum-black) on CodePen

[iDad5]

the snap property has its own onComplete callback and others.. That should do the trick.

[M. Jardel]

Can I use the snap property in combination with scroll-snap-type CSS property?

 

See the Pen KKoQxMJ?editors=1111 by djarum-black (@djarum-black) on CodePen

 

I tried like this - but the callbacks aren't run at all.

[iDad5]

I see the snap callbacks firing in your codePen.  The snap start callback ir firing rather often, maybe that due your scrollTrigger setup, but the complet callback is likely anyhow the one that you want. 
My gut feeling tells me that using the scroll-snap-type CSS property probably isn't a good idea, and I'd guess that Jack would have thought of that too and disabled it, ore used it - still I don't see why you would need it. If only as a fallback, you should easily be able to remove a class when you successfully initiate ScrollTrigger. 

[GreenSock]

ScrollTrigger's snapping kicks in when normal scrolling STOPS (it must wait for that, otherwise it'd interrupt normal scroll). And once it starts its snap, it watches to see if something else tries to take control of the scroll (like if the user grabbed the scrollbar or spun their mouse wheel or dragged their finger on the touch screen, etc.) in which case it releases control and cancels its snap. 

 

In your case, you applied CSS scroll snapping, so as soon as ScrollTrigger started to snap, the CSS scroll snapping jumped in and took over, so ScrollTrigger gave up (thus it didn't fire the onComplete...that is purposeful since it didn't complete). 

 

Make sense? 

 

It doesn't really make sense to have CSS scroll snapping AND ScrollTrigger snapping - you're creating conflicts. See what I mean? 

[M. Jardel]

Hi,

 

The only example I could find of vertical full-page sections in the examples are this one:

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

 

And this also uses CSS scroll-snapping. I'm also fairly new to GSAP - so couldn't create the same scroll snapping purely using ScrollTrigger snapping. I tried "1 / ( number of sections - 1)" approach - but doesn't have similar snapping effect. Tried pinning, etc with no avail.

 

Yeah I see what you mean and it's not like I want to use them both - I just want to have entrance and exit animations in every full-page section and have scroll-snapping. With CSS scroll-snapping, I couldnt't get any exit animations because it almost immediately scrolls to the next section - so  when regular scrolltrigger leave functions run, we're already at the next section.

 

 

 

[GreenSock]

1 hour ago, M. Jardel said:

I couldnt't get any exit animations because it almost immediately scrolls to the next section - so  when regular scrolltrigger leave functions run, we're already at the next section.

I'm not sure I understand your goal correctly, but why not just adjust your "end" higher if you want it to fire sooner? Like end: "bottom 95%"?

 

[M. Jardel]

Because if you do it like that, that exit animations run when you open the page - I want my exit animations to run when the user scrolls down.

See the Pen KKoQxMJ by djarum-black (@djarum-black) on CodePen

 

 

This is the animation I want to have.  On entrance the text slides from one side. Then when the user scrolls down, first the text slides back and than it scrolls down to the next section.

See the Pen dymdwZR by djarum-black (@djarum-black) on CodePen

[GreenSock]

4 hours ago, M. Jardel said:

Because if you do it like that, that exit animations run when you open the page

That's because you've got snapping set up so that the moment the page loads, it tries to snap downward which then triggers your exit animation but then you have conflicting CSS scroll snapping that's forcing it back up

 

It's fine if you want o use CSS scroll snapping - just delete the ScrollTrigger snapping then. 

 

Are you trying to do this?: 

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

[M. Jardel]

I'm trying to do something like this yes - but I think I understand what the problem is.

 

In Firefox, when CSS scroll-snap is applied, when scrolled down, page is scrolled to the next section almost immediately, so the exit animations aren't visible. When I try your example in Chrome, there's a little delay between this actions - so animations are visible.

 

So for consistency - my question becomes, can I apply the full page snapping only with GSAP - so they will be consistent between browsers.

 

Thanks for your help by the way, much appreciated.

[GreenSock]

3 minutes ago, M. Jardel said:

can I apply the full page snapping only with GSAP - so they will be consistent between browsers.

Snapping in GSAP/ScrollTrigger should be consistent across browsers, yes. But beware that the snapping points you had in there looked incorrect to me - remember, it was forcing it to scroll down right away when you load the page because that's what you requested with your snapping values. 

 

If you're trying to play an "exit" animation fully before you animate another section in, I wonder if you'd be better served by no scrolling at all and just using Observer plugin instead. See the demo on that docs page: https://greensock.com/docs/v3/Plugins/Observer

 

That way you have complete control over what is shown because there's no actual scroll at all. You just animate stuff as you wish. Of course there are down sides to that approach too, like users can't just whip their mouse wheel down fast to get to the "bottom" of the page. 

 

It's totally up to you. 

[M. Jardel]

Yes, I think I'll make more sense to go with that approach and have total control over entrance and exit animations.

 

Thank you very much.