Jump to content
Search Community

Scrolltrigger + ScrollTo + Timeline Animation

Eminer79 test
Moderator Tag

Recommended Posts

My goal is to have the last slide come in horizontally and to have a text animation on each slide as they scroll into view. I'm thinking this is the best way to do this but I'm having trouble attaching a timeline to the scrolltrigger's scrollto animation.

 

Im trying to understand how to add scrollto instant mousescrolling to something like this with a timeline

 

 

See the Pen JjGMzdm by emanboogie (@emanboogie) on CodePen

Link to comment
Share on other sites

20 minutes ago, ZachSaucier said:

Hey Eminer79 and welcome to the GreenSock forums!

 

I outlined how to snap to a section and play a given timeline in this post. 

Let us know if you have any questions.

 

 First of all, I just want to thank you for taking the time to respond here, and the welcome.

I'm learning and a bit dyslexic so its slow-going. You know Its funny I was gonna use that as a base but for some reason I didn't, newb mistake maybe. I have two questions though, first how would I make different animations per section? And second how can we get this woking on ipads, both your version and mine have a crazy bug on my ipad touchscreen. Thanks so much for pointing me to that clue I missed on  how I could get this done. I'll keep updating this pen with my progress...

I noticed is you turn autoKill: false, to true it works on ios but other stuff breaks.

Link to comment
Share on other sites

47 minutes ago, Eminer79 said:

how would I make different animations per section?

There are lots of ways to set it up, the best depends on the variety of your animations. If each one is unique, you could use the index or check the ID and create an animation based on that. If you have a few different categories maybe it'd be better to use classes to determine which animation to use.

 

49 minutes ago, Eminer79 said:

how can we get this woking on ipads, both your version and mine have a crazy bug on my ipad touchscreen.

Sorry, I don't have an iPad to test with. What sort of bug are you talking about?

Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

 

Sorry, I don't have an iPad to test with. What sort of bug are you talking about?

 

On the Ipad it adds a strange glitchy ghosting to  the section your swipeing too and then skips to the next with more ghosts glitches, on my phone, it get stuck on the first pin its worse. Hmmm... debugging attempts now...

Link to comment
Share on other sites

16 minutes ago, ZachSaucier said:

You could try hiding the overflow while the animation is happening and see if that helps:

 

Unfortunately, no dice. Still a touch bug, setting autoKill: true, seems to fix it but breaks the pinning effect.

 

Link to comment
Share on other sites

I've looked into this for a bunch of hours and here's what I found: 

  • It looks to me like the problem is that Apple's momentum scrolling is fighting with your scrollTo tween, so you see it kinda jerk back and forth super fast (Apple sets, GSAP sets, Apple sets, GSAP sets).
  • Previously you could set the CSS property -webkit-overflow-scrolling: auto to prevent the momentum scrolling...but in iOS 13, Apple dumped that
  • I have scoured the web and cannot find ANY way to disable momentum scrolling in iOS 13+ on an iPad. Can anyone else? This is a huge oversight on Apple's part.
  • Previously if you set a scroll property, it would signal to Safari that it should stop the momentum scroll, but from what I can tell that no longer happens. So Apple is FORCING momentum scroll all the time with no way to disable it (at least that I can find). 
  • Other people are running into the same problem with iOS Safari. 

So I can't figure out any solution. Apple seems to have really botched things here. 

 

And to be clear, this isn't a bug in ScrollTrigger or ScrollToPlugin - it's the browser that's refusing to give up control of the scroll. 

 

Again, if anyone has suggestions/ideas, I'm all ears. 

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