Jump to content
Search Community

Lottie scroll and pinning

Gigi1303 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello, I'm creating an html page with some panel sections that pin after changing backgrounds.

While the section is pinned, the lottie animation plays for every panel.

The problem I'm having is that sometimes, in a totally random way (more often after refreshing the page when you reach the bottom) the start position for the first Lottie animation changes and it plays too late.
I'm really banging my head on this, I tried everything to solve the problem but I can't seem to find the solution. I know there are many scrolltrigger, lottie animations and other scrolltriggers for pinning, but I don't have any other choice for doing the stuff I need.

Let me know if you have any ideas.

Thank you for all your help.

 

See the Pen eYjeQaZ by luigi-basile (@luigi-basile) on CodePen

Link to comment
Share on other sites

Hi,

 

You can wait for all the animations to be loaded and ready and after that call ScrollTrigger.refresh(). Something like this:

const totalLotties = 3;
let loaded = 0;
const imgReady = (e) => {
  loaded += 1;
  if (loaded == totalLotties) {
    ScrollTrigger.refresh();
  }
};
a1.addEventListener("data_ready", imgReady);
a2.addEventListener("data_ready", imgReady);
a3.addEventListener("data_ready", imgReady);

Where a1, a2 and a3 is each lottie instance returned by the LottieScrollTrigger helper function.

 

Hopefully this helps.

 

Happy Tweening!

Link to comment
Share on other sites

Thanks Rodrigo, I'll give it a try.

I was thinking, should I wrap all the gsap and scrolltrigger code in a function and execute it all after the animations has been loaded? Or do you think that a ScrollTrigger.refresh(); will be enough?

Thanks!

 

Link to comment
Share on other sites

Hi,

 

For what I tested, it seems that the refresh method in the global ScrollTrigger instance seems to work. But if you feel more comfortable with a different approach, it certainly won't hurt trying. It could work better and/or faster, but to know that you have to implement such approach and test.

 

Good luck with your project. Let us know if you have more questions.

Happy Tweening!

Link to comment
Share on other sites

Hi guys, unfortunately the ScrollTrigger.refresh(); solution is not working in my code.

Unfortunately I can't post the whole code of my project here. Basically, in certain situations, when you refresh the page after having scrolled towards the end, sometimes the start position of the first two Lotties animations (yep, only those two) changes, making the scroll animation unusable.

What else can be causing something like this? Should I post a more complex version of the code to give you a better idea?

Let me know and thanks.

 

Link to comment
Share on other sites

You can try posting a more complex version, but if you do that, gradually layer in complexity into codepen until it breaks. This is also a helpful way to isolate the issue, sometimes when folks do this they find the problem themselves in the process

We won't be able to help with an entire site that's copied over into codepen (that sound obvious but people do it!)

If I were you I would put a bunch of borders around my elements, enable markers and fire off some console logs for each event listener to do some sanity checks.

Maybe you have a stray var declaration, something isn't being called  or there's something wacky going on in your CSS?

Link to comment
Share on other sites

That's not bad practice in and of itself. It just depends on what you're trying to achieve.  That does look like it would be starting the animation in a bit of a weird place though. Have you popped markers on to see where it's starting?

Overlapping start positions could cause issues too. 

Link to comment
Share on other sites

Cassie, that negative value was because I needed the animation starting a little bit before pinning the section which is triggered by a separate ScrollTrigger.  The problem is that, activating the markers, the start positions of the lotties are not steady (hope it's the right term, english is not my first language), they sometimes shift to the bottom rendering the animation useless because it is already finished when you reach the lottie trigger.

Link to comment
Share on other sites

 

Hey all.

 

I think, using the string syntax for start / end with only one parameter, like you do throughout your codepen demo, @Gigi1303, is actually not valid ( as in e.g. start: "top" for instance ) and is bound to lead to problematic behaviour.

 

You can use a singular value as a number (not in string form) and it will translate to the absolute scrollposition on the page or as a relative value in case of the end, like "+=100%". But other than that, when you use the string syntax, you are supposed to give two parameters, as in "top top" with the first referring to the element and the second referring to the viewport (as explained in the ScrollTrigger docs).

 

Maybe try and change that in combination with the other suggestions you've already gotten, and see if it helps.

 

For confirmation, here is @GreenSock mentioning this in one other thread (among many):

 

 

 

 

 

 

  • Like 2
Link to comment
Share on other sites

Thanks @akapowl, you're right about that, I still haven't quite grasped how start and end works. I still have a lot to learn.

Anyway, if you're willing to have a check on my web project, here it is, I know it's still too much but I don't think I can possibily make it simpler than that.

 

See the Pen gOjzKaB by luigi-basile (@luigi-basile) on CodePen

 

Thanks a lot for the support, that's really an awesome community.

 

Link to comment
Share on other sites

 

Sorry, but no, I can't do that - that is a bit too much of a favour to ask. I'd keep it with what Cassie suggested; start with a blank canvas, add things to it piece by piece, test test test, and when things break, you will have a better angle on what might have caused it.

 

Creating ScrollTriggers out of order of their appearance on the page (like especially inside forEach loops creating pinning ScrollTriggers) can become very tricky quite quick. I suspect, in a complex scenario like that, you might have have to consider the use of refreshPriority and/or .sort() in one way or another; but that is just a suspicion from a quick glance, nothing I can guarantee.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.sort()

 

Link to comment
Share on other sites

Ok, I understand that, unfortunately I couldn't make it simpler than that.

So a good solution could be to ditch the for/each loop and put the scrolltrigger (and lottiescrolltrigger) in order as they appear on the page? In that case I'd trigger each section in order.

 

Link to comment
Share on other sites

 

Usually it is best to create your ScrollTriggers in order of the appearance of the elements on the page. ScrollTrigger needs to process the page from top to bottom, so ScrollTriggers further down the page have information about what is going on above, as layout might have been shifted before, which they need information about in order to calculate correctly, where to trigger.

 

Imagine you have a forEach loop creating a bunch of ScrollTriggers for multiple sections on your page. Then, in your code after that forEach loop, you create a ScrollTrigger that is pinning something in between those sections - that pinning will cause the positioning of the elements that come later on, to shift. But since you have already created the ScrollTriggers for some of those elements further down the page before you created the pinning ScrollTrigger, and now in hindsight due to the pinning their position on the page gets shifted down, the calculations made by ScrollTrigger for those elements will not be correct anymore. See the problem?

 

Of course often times it is more convenient to use loops and quickly itterate over multiple elements, but that often is where problems can occur, and that's what .sort() / refreshPriority are there for to help out with.

 

Now again, I'm not saying that this is the cause of your issue - just wanted to give you a heads up on that, because it should be something to be aware of, when constructing your JS like you are.

 

Link to comment
Share on other sites

Now I'm really beginning to understand, thanks for the very detailed explanation of what's happening.

I'll go back behind the desk, I had a Kamikaze like approach to this project because I was rushed by the deadline, but sometimes you gotta take a step back and not be afraid of redoing everything.

Thanks again

Link to comment
Share on other sites

Tried putting individual triggers, sorted out the order, tried giving priorities, nothing seems to work.

It keeps going worse instead. If I put priorities as they should (pin the section, animate lottie, pin the next section and so on) nothing seems to work anymore (even the pin on the section). Disabled everything but the first 2 sections, still no dice.

Unfortunately I can't post a simpler example than the one I posted, I will see if I can post an even more simpler pen.

Until then, thanks a lot for all your help.

Link to comment
Share on other sites

Updated my pen, simplified it even more. I can't do better than that, unfortunately. As you can see now the triggers are in perfect order as they appear on the page.

 

The updated pen:

See the Pen gOjzKaB by luigi-basile (@luigi-basile) on CodePen

 

Basically what I'd like to do is:

- Pin the section

- Start the lottie animation on scrolltrigger

- Pin the next section, start lottie animation, and so on N times.

- After all the pinned sections there's a "normal" one that doesn't pin but contain lotties that have to animate on scroll.

 

What I did:

- put a data-refresh attribute on the divs that have to animate to give refresh priority in scrolltrigger (you can see they are commented right now)

- put all the scrolltriggers in order as they appear on the page, ditching the for/each loop.

 

Putting the refresh priority parameter breaks everything on the page, even the sections doesn't pin anymore.

 

Thanks as usual.

 

 

Link to comment
Share on other sites

 

Out of curiosity I was tinkering a bit and I noticed some differences in behaviour in between versions of GSAP/ScrollTrigger but I'm actually not sure if  things that occured for me are those that you are mentioning.

 

Could you check if this version of your codepen does behave any different for you? It is reverted back to GSAP and ScrollTrigger 3.11.1

 

See the Pen VwBdKvv by akapowl (@akapowl) on CodePen

 

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