Jump to content
Search Community

How to delay scrolling until animation finishes?

gruffy123 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

http://antonin.space/alcara/

 

Is it possible to create an effect similar to this with GSAP? When you scroll down, the scroll does not immediately happen. The images are first masked on the sides, and then the scroll snaps to the next segment of the page before the images are unmasked. I'm thinking that it could somehow be done with TimelineMax, but I'm not sure how to delay the snapping. It makes for a much nicer effect than what I currently have, which is a function being called (containing multiple GSAP Timeline functions) on mouseenter/mouseleave on div for a page section. This takes a second to update and the lag is very visible, whereas the example I've linked feels immediate.

 

If somebody knows a codepen or other resource where a similar effect is achieved, I would be extremely grateful if it were shared with me. Feel like I'm getting to the point where I can make nice effects with GSAP, but the transitions feel a bit jittery because I'm not sure how to trigger them with good timing.

 

Thank you!

 

 

Link to comment
Share on other sites

I'm not entirely sure, but I think you're looking for info on the wheel event.

https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event

 

You can add a listener and play an animation. Subsequent wheel events while the animation is playing can simply return without doing anything. I made these basic examples for a different forum question, but maybe they'll help.

 

See the Pen QPpamy by PointC (@PointC) on CodePen

 

See the Pen EJWpry by PointC (@PointC) on CodePen

 

 

Happy tweening.

  • Like 1
Link to comment
Share on other sites

Here's a push in the right direction also based on a slider project from our good friend @PointC

 

I make no promises that this is the most efficient way to do it, it's just what I thought of.

Observe that the white box will animate out, then scroll occurs, then animation for next box on new slide occurs.

 

To roughly match the performance of your example I've added some logic to the the slider that

 

1. creates an array of animations matched to length of slides and runs first animation for first slide, I've just used the loop to make one common animation for all slides you would want to make your own custom animations for each one matched to the index of the slide

2. then on events (mousescroll, arrows) reverses the animation on current slide (referencing oldSlide index pos) and an onReverseComplete then calls the function to progress to next slide

3. then runs the animation for new slide (referencing activeSlide index pos) 

 

Hopefully that makes sense?

 

See the Pen NZqgKr by Visual-Q (@Visual-Q) on CodePen

 

  • Like 2
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.
×
×
  • Create New...