Full Page Lottie Animation - Planning

[mmc215]

Hello all! I am a longtime greensock advocate (joined in 2009!) but come from the visual design side so most of my experience is providing devs with annotated mockups and assets to build. Long story short - I just want to learn to do these things better myself and with tools like Webflow the bar to entry has lowered drastically for designers like me to build really cool stuff on my own.

 

So - I'm coming here as I start my journey into building a really exciting project and before I start mucking up the code with copy/paste stuff that's all over the internet I'd like to talk strategy. 

 

I hope to utilize gsap/scrolltrigger for many parts of the experience but the fundamental core concept I'd like to achieve is built around a single lottie animation that is pinned and played via scroll in three sequences (frame 0-50, 50-100, and 100-50) as the user traverses down the vertical page through various sections.

 

I have scripted the sequence of animation here

 

To start, I've found the scrollLottie plugin by Chris Gannon and subsequently the helper function made by Greensock. Seems like the native implementation is the ticket.

 

Beginner questions:

 

1. Should this whole sequence be established via timeline structure? Do I initialize the LottieScrollTrigger inside the gsap.timeline?

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: "#container-div",
    pin: true, 
    start: "center center",
    end: "+=750", //should I set an endTrigger to reference when its time to pin at the top of section 2 and beyond? use duration instead?
    scrub: 2
  }
    
  LottieScrollTrigger({
	target: "#lottie-animation",
	path: "https://www.website.com/file.lottie",
	speed: "medium",
	scrub: 2 // seconds it takes for the playhead to "catch up"
});

2. Do I understand correctly that I should be pinning the container-div and animating the objects (lottie-animation, images) inside?

3. How do I build out a sequence of animations within this timeline structure, is it a new scrollTrigger element each time repeated as we go down the page?

 

Understand this is both complicated and also really amateur hour but I am so grateful for the help. After this step I will be able to provide a minimal demo if I/when hit any snags!

 

 

 

 

 

 

[GreenSock]

5 hours ago, mmc215 said:

I am a longtime greensock advocate (joined in 2009!)

Wow, that's great! Back from the Flash/ActionScript days, huh? 🙌

 

5 hours ago, mmc215 said:

1. Should this whole sequence be established via timeline structure? Do I initialize the LottieScrollTrigger inside the gsap.timeline?

Yep, that sounds about right to me. One timeline that has a ScrollTrigger that does the pinning. Then, you'd sequence the various steps you outlined in the timeline. 

 

5 hours ago, mmc215 said:

2. Do I understand correctly that I should be pinning the container-div and animating the objects (lottie-animation, images) inside?

Yes indeed (assuming I understand your goal correctly). 

 

5 hours ago, mmc215 said:

3. How do I build out a sequence of animations within this timeline structure, is it a new scrollTrigger element each time repeated as we go down the page?

I'm not sure what you mean by "a new scrollTrigger element each time repeated as we go down the page". You definitely should not put scrollTriggers on animations that are nested inside a timeline. It's logically impossible for the playhead to be controlled BOTH by a parent timeline AND the scrollbar position. Just apply the ScrollTrigger to the parent timeline (only). 

 

The LottieScrollTrigger helper function was built for when you want to just have a Lottie animation that's triggered by scroll, but based on your description it sounds like you need something more customized such that the Lottie animation is just a small part of a bigger parent animation in which case you'll need to customize things. All the concepts are right there in the helper function for you to leverage. For example, you'd probably need to load your Lottie animation and then once that's done, you'd create your 3 playhead animations, dropping those into a parent timeline that has the ScrollTrigger applied to it. And of course you'd put your other scale/fade animations in that parent timeline too. 

 

Good luck! If you get stuck and have GSAP-specific questions, feel free to post back here with a minimal demo. 👍 If you'd like to explore paid consulting options, feel free to contact us. 

[mmc215]

Actionscript! 🤢

 

Ok so I'm getting my hands a little dirty here. Couple questions off the bat (codepen below):

1) In a master timeline structure, if we're pinning the lottie element at the start how do we go about unpinning it momentarily so that it can transition from center of viewport to top of viewport before being pinned again?

 

2) More broadly, when building animations on a long scroll page like this where one element interacts with multiple sections of the page is the timing of that just down to adjusting the duration? Or is there a way to use triggers hooked on the section divs to establish the timing. I'm wondering about responsive breakpoints / mobile considerations.
 

3) Creating playhead animations frame-to-frame for the lottie: I haven't found a good source for how this is done. I saw that LottieFiles has Interactivity docs that demonstrate how you can chain parts of the lottie timeline together but would I then need to import their lottie-interactivity plugin just for this?  (https://docs.lottiefiles.com/lottie-interactivity/configuration-and-usage)
 

// single section:

LottieInteractivity.create({
    player: '#firstLottie',
    mode: 'scroll',
    actions: [
      {
        visibility[0,1],
        type: 'seek',
        frames: [0, 300],
      },
    ]
});

// or chaining multiple:

LottieInteractivity.create({
  player:'#lottie-target',
  mode:"chain",
  actions: [
    {
      state: 'none',
      transition: 'none',
      frames: [48, 110]
    },
    {
      state: 'none',
      transition: 'none',
      frames: [110, 198]
    },
    {
      state: 'none',
      transition: 'none',
      frames: [198, 110],
      //reset: true
    }
  ]
});

 

I also found another forum user that was using a function somewhat like this but it didn't appear to be complete:
 

proxy.onLoaded(init);

function init() {      
  .fromTo(proxy, {
    frame: 48
  }, {
    frame: 110
  }, 0)

 

Anyway, having fun here. Appreciate you all.

 

See the Pen GRYrjqN by mattCampy (@mattCampy) on CodePen

 

[Cassie]

Heya!

 

So you're loading lottie twice here. The function you're using has been made to do a specific thing - play/scrub through a lottie animation from start to end, which you don't really need. You want to tie the lottie animation into a timeline and control exactly which parts it plays at specific points.

I've broken that function out for you so maybe you can see a little easier what it's doing.

At the end of the day a lottie animation is just a bunch of frames, we just need to update that frame number, just like any other animation property.

 

Hope this helps!

See the Pen MWPJzBE?editors=0011 by GreenSock (@GreenSock) on CodePen

[mmc215]

Cassie! Woohoo thank you it really is powerful to have control of the lottie playhead. I have it working pretty nicely in a fork of my codepen.

 

I'm going heads down for a bit but I'm curious if I am understanding the philosophy of building this type of animation correctly, particularly the second question below.

 

10 hours ago, mmc215 said:

1) In a master timeline structure, if we're pinning the lottie element at the start how do we go about unpinning it momentarily so that it can transition from center of viewport to top of viewport before being pinned again?

 

2) More broadly, when building animations on a long scroll page like this where one element interacts with multiple sections of the page is the timing of that just down to adjusting the duration? Or is there a way to use triggers hooked on the section divs to establish the timing. I'm wondering about responsive breakpoints / mobile considerations.

 

My worry is that if I can't tell this lottie element to do things based on when its container (.lottie-container) encounters new sections of my page and I'm 100% relying on adjusting durations and the timeline end value then I'm going to be in for a bit of trouble for different device sizes as well as if/when any of the content changes.

 

Thanks again.

 

[GreenSock]

This wandering into custom consulting territory.  It's tough to offer very specific structural advice without really wrapping our heads around all the requirements and objectives. It might be most appropriate to have one timeline for everything or it might make sense to have one standalone ScrollTrigger just for the pinning, and then individual tweens/timelines with ScrollTriggers for certain scroll-based effects. 

 

In general, yeah, it often comes down to ratios of timings in your timeline relative to positioning of elements. Technically you could set up individual ScrollTriggers just for the purpose of calculating the start/end positions of those elements and then in a "refresh" event handler, you could dynamically build your timeline accordingly. It's a bit of an advanced technique and I've never needed to use it before but it's certainly doable. 

 

Good luck!

[mmc215]

Wait you folks want to be paid for all this hard work and attention now?! lol I will slow my roll a bit, don't mean to abuse the privilege. At all.

 

I've learned a lot in the past 72 hours, engaging early in the process has helped tremendously. Even just now I think the lightbulb went off. I can use my timeline build to achieve everything I want at the top of the page and when it comes to transition through the various content sections I can just reintroduce the lottie already in a pinned position where I want it and control its animation states via gsap.to + scrolltrigger events tied to the sections.

 

Which leads me to another question. Are there performance issues with loading the same lottie file multiple times with different let instances? Does that file cache or is that a specific operation I'd need to pursue? I realize that is not gsap specific 😬

[GreenSock]

2 hours ago, mmc215 said:

Which leads me to another question. Are there performance issues with loading the same lottie file multiple times with different let instances? Does that file cache or is that a specific operation I'd need to pursue? I realize that is not gsap specific 😬

My guess is that it'd be cached by the browser. You'd still pay a rendering performance price (just not a bandwidth one). 

[mmc215]

Our project kicked off today, wanted to follow up and give thanks for the help gang! @GreenSock @Cassie

 

https://mindhealth.nba.com/

[GreenSock]

Congrats, @mmc215! 🥳