ScrollTrigger - Syncing animated text with Lottie animation

[NZZ Editorial Tech]

Hi

 

I'm using the ScrollTrigger to scroll through a Lottie animation using the following settings:

animation = lottie.loadAnimation({...});
                                  
ScrollTrigger.create({
  trigger: lottieTrigger,
  start: "top top",
  end: "+=750%",
  scrub: true,
  pin: true,
  // markers: true,
  onUpdate: self => {
    animation.goToAndStop(self.progress * (animation.totalFrames - 1), true);
  }
});

So far so good. The animation I use has "scenes" with a length of 4 seconds each. Now, I want to animate some text to fly over every scene.

 

What's the best way to do that? I tried using a Timeline, but the timing gave me a headache. I wasn't able to time the texts in a way, that each one flies in at exactly the start of a "scene" and disappears on top before the next "scene" starts.

 

Any help is greatly appreciated.

 

Greetings

Nick

See the Pen BaWvQdz?editors=1010 by 12_nick (@12_nick) on CodePen

Edited June 15, 2021 by NZZ Editorial Tech

[OSUblake]

You can include your lottie animation in the timeline.

 

let playhead = {frame: 0};

let tl = gsap.timeline({
  scrollTrigger: {...}
});

tl.to(playhead, {
  frame: animation.totalFrames - 1,
  ease: "none",
  onUpdate: () => animation.goToAndStop(playhead.frame, true), 
}, 0)
  .to(...)

  

 

[GreenSock]

Also note that there's a helper function in the docs for making it even easier to work with Lottie animations and tie them to a ScrollTrigger. https://greensock.com/docs/v3/HelperFunctions#lottie

 

Have fun! 

[Али К]

You can do it like that

See the Pen 17f5ec8b40f835f2abf9dcf531a13d60?editors=1111 by itsalimanuel (@itsalimanuel) on CodePen

 

[NZZ Editorial Tech]

Thanks guys for your answers. They did help, but I'm still kinda confused about the whole timing.

 

I had some time now to make an illustration (I added it on top. How do I add a CodePen in a reply? 😅).

 

My goal is to sync the two texts to the Lottie. The Lottie is around 3 seconds long (181 frames at 60 fps). How do I set the TimeLine correctly, so that the first text flies over at second 1 of the Lottie (and the second text at second 2, etc.)?

 

Greetings

Nick

[OSUblake]

8 hours ago, NZZ Editorial Tech said:

How do I add a CodePen in a reply?

 

Just paste the url.

 

8 hours ago, NZZ Editorial Tech said:

How do I set the TimeLine correctly, so that the first text flies over at second 1 of the Lottie (and the second text at second 2, etc.)?

 

You can fine tune it with durations and the position parameter. 

 

  tl.fromTo(".text1", {y: 500}, {y: -500, duration: 1}, 1);
  tl.fromTo(".text2", {y: 500}, {y: -500, duration: 1}, 2);

 

 

 

[NZZ Editorial Tech]

3 hours ago, OSUblake said:

Just paste the url.

Ah, so simple Thanks!

 

3 hours ago, OSUblake said:

You can fine tune it with durations and the position parameter. 

See, I knew about the position parameter, but I think using it with a Lottie animation had me confused. I think I got it now, thanks to posting my issue here and going through my code again step by step.

 

Thanks for all the replies.

 

Greetings

Nick

[akapowl]

 

Since durations (and thus the position parameter) work a bit different on scrubbing ScrollTrigger tweens/timelines than they do on regular time-based tweens/timelines, it might be worth checking that explanation out, too.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

(It is mentioned in a comment underneath the position parameter section but might be overseen)