Jump to content
Search Community

Multiple Timelines, ScrollTrigger and Lottie

BarheimCoder test
Moderator Tag

Go to solution Solved by BarheimCoder,

Recommended Posts

Hi, I've been using gsap and multiple plugins over the last couple weeks. For the most part I've found my way around but been stuck on this for the past day.

 

The pen is a minimized version of what I'm trying to achieve, which is a pinned panel that rolls through 7 sections (all full-screen), and some of the panels have a lottie animation tied to it via ScrollTrigger.

 

I got the panel to work, but tweaking timings is getting complicated, which I'm trying to solve via using a master timeline so the timings are contained.

 

The timeline bit seems to work but I can't seem to get lottie to fire up correctly. Also any pointers on the rest of the code is appreciated as I'm sure there's a lot to be improved.

 

Thanks in advance

See the Pen zYzEGge by barheimcoder (@barheimcoder) on CodePen

Link to comment
Share on other sites

Heya!

Welcome to the forums. Ok I'm going to have to step through this a little, bear with me!

A master timeline shouldn't be needed in this case. You should be able to get the tweens added and positioned on one timeline. Or speerately and trigger by sections. (not sure exactly what it is you're attempting to do)

Let's start with the Lottie animation though.

I assume the code you have came from the helper function here? So this one is working.

See the Pen XWgzXLM?editors=0111 by GreenSock (@GreenSock) on CodePen



This is yours simplified down.

See the Pen powdyjb?editors=1011 by GreenSock (@GreenSock) on CodePen



The frame number logged out to the console for the working pen I linked to is going from 0 to the total frame rate, whereas yours is going from 0 to -1.

I don't know why? I'll poke around a bit more.

Link to comment
Share on other sites

Oh my bad I forgot the helper function, so I've added it on my codepen.

 

A master timeline will help me a lot, as I mentioned there's something like the pen that goes for 7 full panels, and each panel has its own combination of lottie, scrolltrigger or both, this means that tweaking durations affects the whole timeline, where if I set up each panel as a subtimeline (nested? not sure on the proper term), then the duration changes are contained and won't affect other panels.

 

If there's an easier way to do this please let me know. And thanks for the quick response!

Link to comment
Share on other sites

Well - you weren't doing anything too different from the helper function really -  so you could certainly do it your way.

The issue is that when you initiate the tween controlling the lottie animation the lottie animation isn't loaded yet so you don't have the correct frame number.

In the working pen there's a DOMloaded listener!

 

animation.addEventListener("DOMLoaded", function () {}

 

I've tried adding that in but it's not calling it - I'm afraid this is the limit of my ability to help. I don't know enough about Lottie to figure out why the DOMLoaded event isn't firing.

You can open the console for more details.... Maybe someone else can jump in?

See the Pen MWoOewV?editors=1011 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

You certainly shouldn't be nesting scrollTriggers.

ScrollTriggers don't have start and end 'times' like normal animations, they have start and end positions on the page.

 

18 minutes ago, BarheimCoder said:

the pen that goes for 7 full panels, and each panel has its own combination of lottie, scrolltrigger or both


You'll need to set up each panel to have start and end triggers that don't overlap and then work out the animation positions per section with separate scrollTriggers.
 

  • Like 1
Link to comment
Share on other sites

35 minutes ago, Cassie said:

You'll need to set up each panel to have start and end triggers that don't overlap and then work out the animation positions per section with separate scrollTriggers.
 

just like the pen, currently I got the panels positioned as absolute, so they are stacked on the same spot and they fade in as the scroll-trigger progresses (plus the animations which are not in the pen).

 

I havent found a clear answer on this, some seem to hint at having only the master timeline as a scrolltrigger (how I did), but yours seem to hint at not having subtimelines, but separate timelines altogether. I understand that if I did a scrolltrigger per subtimeline wouldn't be the correct way to go about it (nested triggers).

 

Edit: For the "animation.addEventListener("DOMLoaded", function () {}", how do I use it with multiple animations? Do I just run one after the other or should I somehow combined multiple lotties and run a for each loop?

Link to comment
Share on other sites

Ah, great, thanks Blake - so we were missing reference to the container!
 

container: document.querySelector("#lottieDiv1"),

 

Updated pen here.

See the Pen powdPNE?editors=1111 by GreenSock (@GreenSock) on CodePen


Right - Panels!

You could maybe do something like this for the panels if all of them are going to be 100vh

Set up a scrollTrigger for each with start and end positions based on window.innerHeight and the panel number?

See the Pen vYZWgmL?editors=0111 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

Think I got the timeline things to work, my biggest issue right now is getting the script to run only after all lotties loaded. From research it seems best to just load them into an array and then running a loop checking if it all loaded, so that's where I am now.

 

I'm finished for today so will check replies tomorrow, thanks a lot for the help so far.

  • Like 1
Link to comment
Share on other sites

  • Solution

For anyone that lands in here, I've managed to solve this, for full pen check: 

 

Multi Lottie Loading:

I now load all lotties at the top of the script as usual, but I then add them to an array and check the whole array to see if it loaded, then trigger a function that contains my usual gsap / scrolltrigger stuff.

 

Multiple Timelines

My issue wasn't creating them but getting it to do what I wanted. You can just do timelines then use ".add(tlName)" to add to a master timeline. What I wanted however was to isolate the subtimelines so changing animation duration wouldn't affect the others, this was achieved by adding ".totalDuration(15)" at the last step of each subtimeline.

  • Thanks 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.
×
×
  • Create New...