buster808 Posted May 24, 2021 Share Posted May 24, 2021 Hi, I'm using lottie with scrolltriggers and locomotive. It works fine when I resize the browser window but not on first load. Tried adding refresh into function but no joy. Thanks See the Pen OJpmvwV by buster808 (@buster808) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted May 24, 2021 Share Posted May 24, 2021 I can't seem to reproduce the issue in the CodePen. 1 Link to comment Share on other sites More sharing options...
buster808 Posted May 24, 2021 Author Share Posted May 24, 2021 I just tested this in windows 10 Chrome and works fine. But not in Mac Google Chrome Link to comment Share on other sites More sharing options...
GreenSock Posted May 24, 2021 Share Posted May 24, 2021 55 minutes ago, buster808 said: But not in Mac Google Chrome I'm on a Mac and it seems to work fine in Chrome. I must be missing something. What exactly are you seeing (or not seeing)? Link to comment Share on other sites More sharing options...
buster808 Posted May 25, 2021 Author Share Posted May 25, 2021 Hi, Theres two scroll triggers in the pen exactly the same animation. First load only one animation will scroll but when window is resized then it will scroll both animations. This is an example online using a lottie scroll and a Scrolltriiger. same issue ... thankshttp://justgym.xtracreative.co.uk/ Link to comment Share on other sites More sharing options...
Solution GreenSock Posted May 25, 2021 Solution Share Posted May 25, 2021 It sounds like you just need to call ScrollTrigger.refresh() after the Lottie animation loads because it is causing layout changes. I've updated the LottieScrollTrigger() helper function to call ScrollTrigger.refresh() accordingly: function LottieScrollTrigger(vars) { let playhead = {frame: 0}, target = gsap.utils.toArray(vars.target)[0], speeds = {slow: "+=2000", medium: "+=1000", fast: "+=500"}, st = {trigger: target, pin: true, start: "top top", end: speeds[vars.speed] || "+=1000", scrub: 1}, animation = lottie.loadAnimation({ container: target, renderer: vars.renderer || "svg", loop: false, autoplay: false, path: vars.path }); for (let p in vars) { // let users override the ScrollTrigger defaults st[p] = vars[p]; } animation.addEventListener("DOMLoaded", function() { gsap.to(playhead, { frame: animation.totalFrames - 1, ease: "none", onUpdate: () => animation.goToAndStop(playhead.frame, true), scrollTrigger: st }); ScrollTrigger.refresh(); // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes }); return animation; } Does that help? 2 1 Link to comment Share on other sites More sharing options...
buster808 Posted May 25, 2021 Author Share Posted May 25, 2021 Thanks again PERFECT. 1 Link to comment Share on other sites More sharing options...
buster808 Posted May 25, 2021 Author Share Posted May 25, 2021 Hi, I noticed on scottie Lottie thats theres duration. Is it possible to add this too LottieScroll Trigger. Thanks Link to comment Share on other sites More sharing options...
GreenSock Posted May 25, 2021 Share Posted May 25, 2021 You have total control over that already - if you don't want to set a speed to "slow", "medium", or "fast", you can just set the end value to whatever you want (that's what the speed does anyway). There's no "duration" when it comes to scroll positions - it's all about how far away the "end" is from the "start". So you can do end: "+=2000" and then if you want it to last even longer, do end: "+=3000" or whatever number you want. 1 Link to comment Share on other sites More sharing options...
buster808 Posted May 26, 2021 Author Share Posted May 26, 2021 I added end:+=4000 to my first scroll now the animation is exactly what I want.. Then added the below to my second trigger trigger: ".boxContainer", start: "top -4000", end: () => "+=" + innerHeight, This works fine so I guess my question is, is this the best way to get the second trigger to line up. Thanks Link to comment Share on other sites More sharing options...
GreenSock Posted May 26, 2021 Share Posted May 26, 2021 1 hour ago, buster808 said: This works fine so I guess my question is, is this the best way to get the second trigger to line up. I'm not really sure what you're lining up exactly or how to advise you. If it works, great. If you still need help, please provide a minimal demo. 1 Link to comment Share on other sites More sharing options...
Mlbb lan Posted October 20, 2021 Share Posted October 20, 2021 What could be the reason in the vs code editor in live server mode I cannot see the black block s3 after the animation has worked in block s2 But in codepen everything works as it should? I need to squeeze the screen and then the animation works, tell me what is done wrong? See the Pen NWvRPor by GeorgeDesign2020 (@GeorgeDesign2020) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted October 20, 2021 Share Posted October 20, 2021 Hi GeS, If it's working in codepen it's definitely not an issue with GSAP. I'm afraid it's out of the scope of these forums to help debug issues with your local setup. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now