Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

lottie with scrolltrigger

Go to solution Solved by akapowl,

Recommended Posts

here is the pen...

If I use lottie animation and pin it true .anotherdiv overlaping animation div...you can see .anotherdiv scrolltrigger markers...


what is the problem on this scrolling? About scrolltrigger or lottie?





See the Pen ExmLwbd by ersenturgut (@ersenturgut) on CodePen

Link to comment
Share on other sites

Check out the common mistakes page. A timeline shouldn't have nested scroll triggers.


  • Like 3
Link to comment
Share on other sites

  • Solution


Hello there. It's best to create your ScrollTriggers in the order of appearance on your page.


You've got that first ScrollTrigger in your init() function which is being called on load of your Lottie, it looks to me - but that other ScrollTrigger is not in that load event - so chances are pretty high, that it will be created before the other ScrollTrigger - and then it can not take the pinSpacing of that other ScrollTrigger into account. This is what I think is the core issue.


If you do not want or can not create your ScrollTrigger in order of appearance, you might want to take a peek at the .sort() method and/or using refreshPriorities for your Scrolltriggers (which are being explained on that same documentation page).




Some sidenotes:

You've got the exact same scrollTrigger setup for your two first timelines there - there's no need to create two seperate scrollTriggers in that case. You could just add those tweens to the same timeline and set their position parameter to 0 if you wanted them to both start scrubbing right onEnter.


If the body is the scroller, pinType: "fixed" will be used by default, so there is no real need for setting that. The body will be used as the default scroller, too, so technically there is also no need for setting that. And one more thing: anticipatePin is supposed to be a number.


anticipatePin Number - If you pin large sections/panels you may notice what looks like a slight delay in pinning when you scroll quickly. [...]



I Hope that's helpful.


See the Pen b67f3eff0e52b0633b604893579da19e?editors=1010 by akapowl (@akapowl) on CodePen

  • Like 3
Link to comment
Share on other sites

akapowl !


thanks for your reply...solved my problem...great!

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