Jump to content
GreenSock

Pollux Septimus

How to kill the scroll and use the scrollTrigger callback to run a animation that snaps to the next element

Recommended Posts

I am fidgeting trying to achieve this effect for a while but I ran into some problems. 

I am trying to use the scrollTrigger callback to run a animation while the normal scroll is disable and enable it again after the animation finishes. 

 

I have use those two threads (thread1thread2) trying this as their am looking for a similar result but those two example are using full page sections I am now sure if this would work for my animation, witch you can see in the linked code pen.  I have also trying using snap when building the animation using pin and scrub but I did not manage to make it snap to each card. Also is not really what I am trying to achieve. 

 

The effect I am trying to create is when ever a user triggers a scroll behavior the animation snaps to the second card and so on while the entire section stays in place. After the animation come to completion the use would be able to scroll normally through the rest of the app. Like in thread nr: 2. 

 

My question is: Is what I am trying to do possible and if yes? Would you please take a look at the demo and point out what is it that I am not doing right?

See the Pen mdxBGMo?editors=0110 by raul-rogojan (@raul-rogojan) on CodePen

Link to comment
Share on other sites

Hi Pollux, I'm not really understanding what it is you would like to do. You talk about a second card nd about animations, but I can see only one card that stays in place for a while and then moves with the page. And I don't see the animation(s) you are talking about.

My advice here would be: Try to achieve what you want in a timeline without ScrollTrigger, once you are at least close to your goal that way adding scroll behavior usually is much more easy. 

Link to comment
Share on other sites

@iDad5 Hello,

There is a commented version using pin and scrub. I have left all the code I tried because I tough I might be really close.

I uncommented the scrub version for you. 

Link to comment
Share on other sites

@iDad5 Hello,

There is a commented version using pin and scrub. I have left all the code I tried because I tough I might be really close.

I uncommented the scrub version for you. 

 

Also, those are the codepens that I referred to when linking the threats 

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

   

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

Link to comment
Share on other sites

Ok, it must be me, now I see your first CodePen working in a "good" way. Also now it looks like it does exactly what you wanted (as far as I understand) and I don't see where you have the problem.   ...  (I'm a bit confused by the day anyhow, to it likely is me)

Link to comment
Share on other sites

I would like to snap to the next card with a single scroll behavior like in the codepen demos that i've shared.

Link to comment
Share on other sites

I was going to suggest the typical "snap" feature of ScrollTrigger (which would work...but it can't work until scrolling has stopped), and then I had an idea...

 

Dynamically apply legitimate CSS scroll snapping by adding invisible elements to the DOM that serve as snapping positions, and set them up them onRefresh! Then we set scrollSnapType on the document.scrollingElement when the ScrollTrigger toggles active/inactive. Seems to work: 

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

 

Does that work the way you hoped? 

  • Like 3
Link to comment
Share on other sites

Hi @GreenSock,

I have tring this using only snap but I wasn't successful. Although I would like the animation to run on a single scroll like in this

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

. I have tried to replicate the scrolling object that would prevent the scrolling using the gsap ticker. I fell like there is the problem. I would appreciated if you could take a look at the please :D . Mean while I will try achieving the effect using your example. 

 

Thank you!

Link to comment
Share on other sites

@GreenSock , I build it in my real project and it seems batter, very close to what I wanted and it should be fine. But I have some problems with the wheel on the mechanical mouse. From what I have reed there is a big difference between the touchpad and the mouse wheel delta. The animation runs very fast when using mouse wheel and I thing that difference is the problem. 

Does gsap have a way to normalize scrolling and make it the same for different scrolls behaviors? 

Link to comment
Share on other sites

I know I risk to be seen as the grumpy old man that wants to kill all the fun, but I really feel the need to point it out:

 

There is a good reason why it is possible to adjust settings of hardware like mice and trackpads to individual values. Elderly people, or people with disabilities really need to be able to set the 'slow'  - power-users with multiple large displays often want it fast to work efficiently. I firmly believe that we as developers should respect that as far as possible.


It will be tricky to technically do what you want (I'm sure with GreenSock's ingenuity and a lot of testing on different devices it can be achieved for most setups though) - but from a usability and accessibility point of view it probably shouldn't be done. It would at some point feel like making all the mistakes from Flash-days all over again.

Don't you think you can try to play with the ScrollTrigger setting to increase the scroll-distance for you special element as a compromise?
 

Link to comment
Share on other sites

10 hours ago, Pollux Septimus said:

he animation runs very fast when using mouse wheel and I thing that difference is the problem. 

Does gsap have a way to normalize scrolling and make it the same for different scrolls behaviors? 

We can't control if the user has changed their local settings to make their mouse/trackpad more/less reactive, no. And like @iDad5 said, that could be risky to mess with anyway. If, for example, a user wants to make their mouse wheel faster and your site is like "no way, buddy, I'm FORCING you back to the speed I want you to go", well, that isn't gonna make users feel great about your site. 

  • Like 2
Link to comment
Share on other sites

Unfortunately increasing the scroll distance wont help. The main issue is the first tick of the wheel. If the user inputs a single tick on a wheel the animation will snap vary fast. If the user scrolls a bit more, the animation runs pretty good, if the user scroll relative hard the animation will run until the end. 

I don't think that the scroll speed is the issue. To be honest after I tested it more I don't even know what the issue is. It's pretty annoying that this does not reproduce on the @GreenSock code pen. His solution was quite brilliant and I would really like to make it work.

Link to comment
Share on other sites

13 hours ago, Pollux Septimus said:

I have tried to replicate the scrolling object that would prevent the scrolling using the gsap ticker. I fell like there is the problem. I would appreciated if you could take a look at the please :D 

Sorry, I don't understand your question. Can you please be very specific about what issue you're trying to solve and provide a crystal clear minimal demo with only the code necessary to illustrate the problem? 

Link to comment
Share on other sites

@GreenSock It doesn't matter anymore. I have used your solution. Thank you!! ❤️ 

 

  • Like 1
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.
×