Jump to content
Search Community

locomotive not playing scrolltriggers until window resized.

buster808 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

  • 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

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

  • 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

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