Jump to content
Search Community

Animation conflicts (horisontal slider + scroll trigger)

ysmuglov test
Moderator Tag

Recommended Posts

I have trouble with the margins of my slider container once I finish scrolling. I bet this is because of conflicts with another scrollTrigger, which should enlarge the backgrounds of similar sections on the scroll. Unfortunalety this is my first use of GSAP and I can't understand how to fix it.

Just scroll my Pen and notice how Our Products text is jumping.
 

You might need to open it in Codepen, looks like this problem is not reproducible in the widget.


Thanks in advance!

See the Pen rNvmEzQ by iBasher (@iBasher) on CodePen

Link to comment
Share on other sites

I've disabled one of your ScrollTriggers and the jump seems to have been gone. With this particular ScrollTrigger you're animating the same element that is also the trigger, you almost never wan to do that, because this will endup causing problems when you are not careful. You're also animating the maxWidth with this element, I think you want it to grow to the left and right, right? You can beter use scaleX for that, that is way more performant. 

 

I my self like to always start with a timeline in GSAP, this way if I want a second animation to the same ScrollTrigger I can easily do that, but if you start with just a gsap.to() tween you can't. I've restructured your first ScrollTrigger to be a time line and thus if you want to add something else at the same time (like the scaleX of something) you can now do that and use the position parameter to have these start at the same time. 

 

See the Pen vYjexQg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Thank you @mvaneijgen, but just disabling one of my animations does not resolve this issue :)
I will try to just split my forEach into separate functions, which will surely work, but I feel there are more elegant solutions.

Anyway, do you have suggestions on how to actually Pin slides? Because one fast scroll can skip all 5 of the slides, and I need to show all of them one by one.
I saw this beautiful slider, but its code is completely different from what I have, are there simpler ways to achieve proper Pin functionality?

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

Link to comment
Share on other sites

27 minutes ago, ysmuglov said:

Thank you @mvaneijgen, but just disabling one of my animations does not resolve this issue :)

No but it shows you the tween that is causing your issue. And I've suggested more on how you could fix that issue by animating different properties. See below:

 

On 9/23/2022 at 9:58 AM, mvaneijgen said:

With this particular ScrollTrigger you're animating the same element that is also the trigger, you almost never wan to do that, because this will endup causing problems when you are not careful. You're also animating the maxWidth with this element, I think you want it to grow to the left and right, right? You can beter use scaleX for that, that is way more performant. 

 

You have to ask yourself "do I want my animation to happen on scroll? or do I want to watch for the scroll event and then animate something?"

 

ScrollTrigger is the plugin that allows you too animate something based on the scroll position of the vistors and this is what you now use. 

 

There is also another plugin called the Observer plugin, this one allows you to watch for all kinds of events and do something based on these events. See the example bellow here, it animates to the next slide based on the user scroll interaction, but is doesn't scroll the page. (See the docs for more info)

 

See the Pen XWzRraJ by GreenSock (@GreenSock) 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...