M. Jardel Posted August 2, 2022 Share Posted August 2, 2022 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 Link to comment Share on other sites More sharing options...
iDad5 Posted August 2, 2022 Share Posted August 2, 2022 the snap property has its own onComplete callback and others.. That should do the trick. Link to comment Share on other sites More sharing options...
M. Jardel Posted August 2, 2022 Author Share Posted August 2, 2022 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. Link to comment Share on other sites More sharing options...
iDad5 Posted August 2, 2022 Share Posted August 2, 2022 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. Link to comment Share on other sites More sharing options...
GreenSock Posted August 3, 2022 Share Posted August 3, 2022 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? Link to comment Share on other sites More sharing options...
M. Jardel Posted August 3, 2022 Author Share Posted August 3, 2022 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. Link to comment Share on other sites More sharing options...
GreenSock Posted August 3, 2022 Share Posted August 3, 2022 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%"? Link to comment Share on other sites More sharing options...
M. Jardel Posted August 3, 2022 Author Share Posted August 3, 2022 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 Link to comment Share on other sites More sharing options...
GreenSock Posted August 3, 2022 Share Posted August 3, 2022 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 Link to comment Share on other sites More sharing options...
M. Jardel Posted August 3, 2022 Author Share Posted August 3, 2022 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. Link to comment Share on other sites More sharing options...
GreenSock Posted August 3, 2022 Share Posted August 3, 2022 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. Link to comment Share on other sites More sharing options...
M. Jardel Posted August 3, 2022 Author Share Posted August 3, 2022 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now