Jump to content
GreenSock

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

locomotive not playing scrolltriggers until window resized.

Go to solution Solved by GreenSock,

Recommended Posts

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

I can't seem to reproduce the issue in the CodePen.

  • Like 1
Link to comment
Share on other sites

I just tested this in windows 10 Chrome and works fine. But not in Mac Google Chrome

Link to comment
Share on other sites

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

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 ... thanks
http://justgym.xtracreative.co.uk/

Link to comment
Share on other sites

  • Solution

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? 

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

Thanks again PERFECT.

  • Like 1
Link to comment
Share on other sites

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

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. 

  • Thanks 1
Link to comment
Share on other sites

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

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

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

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

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.

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