Jump to content
Search Community

ScrollTrigger.scrollerProxy problem. Some elements are getting animated on scroll but some are not

kohlej test
Moderator Tag

Recommended Posts

I forked LocoScroll demo that from Greensock codepen account.

My animation with most usual gsap.to tween works just fine on .rotate-box, however .skew-box which has new instance of ScrollTrigger doesn't work, even tho I gave custom scroller to both. Both animations work if I'm not using locoScroll. 

Could someone tell me why is this happening and if there is way around it?

 

See the Pen gOrbbxz by artyor (@artyor) on CodePen

Link to comment
Share on other sites

Hey kohlej.

 

If you remove the scroller then console.log the ScrollTrigger you can see that the end value is the height of the viewport. If you add the scroller and then console.log the ScrollTrigger you can see that the end value is being changed to -0.01. Thus the ScrollTrigger's onUpdate function isn't ran. Maybe @GreenSock can provide some insight as to why that value is used instead of something based on the new scroller?

 

Anyway, you can get it to have the same effect if you add the following:

// Set the end to a viewport's height - as a function so it updates on refresh
end: () => innerHeight,

This causes the onUpdate to run. Though I don't really understand your logic inside of the onUpdate callback - I can't seem to get it working with or without Locomotive Scroll.

Link to comment
Share on other sites

46 minutes ago, ZachSaucier said:

Though I don't really understand your logic inside of the onUpdate callback - I can't seem to get it working with or without Locomotive Scroll.

Here is working example without Locomotive Scroll

See the Pen mdPyyjK by artyor (@artyor) on CodePen


Here it works as intended, where .skew-box is animated on scroll

Maybe the point of using onUpdate is more clear in this example?

 end: () => innerHeight, doesn't seem to do anything for me

 

Link to comment
Share on other sites

2 minutes ago, ZachSaucier said:

Well your function is being ran if you add it so try debugging it :) 

Not really good at it, but I will try. Hopefuly someone else also had experience with this who might help. 
Thanks for usefull info tho!

Link to comment
Share on other sites

Is there a reason you didn't just set trigger: ".skew-box" so that the skewing happens while that element is in the viewport? 

 

When you don't define any trigger, nor any start or end, it'll default to using the scroller's entire scroll height but that isn't discernible when you're using a scrollerProxy unless you set up a getter method for the "scrollHeight" in the proxy. Here's a fork that demonstrates: 

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

 

I wouldn't really recommend using the entire scroller's scrollable height because that's wasteful since it'll be doing the update/skewing even when the element isn't in the viewport, but it isn't "wrong" I suppose. I would just set trigger: ".skew-box" and be done :)

 

Does that clear things up? 

  • 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...