Jump to content
Search Community

Scroll Based Animation using GSAP 3, lottie-web and ScrollTrigger

nattha test
Moderator Tag

Recommended Posts

Hi all,

 

Loving the vibe here😊 This is my first post in the forum ever.

 

I'm trying to implement a scroll based Lottie animation with GSAP 3 and the ScrollTrigger plugin. I've found a solution with GSAP 2 and ScrollMagic but things changed in the newest Version. Does anyone has a working example?

 

Thanks for your support.

 

Cheers,

Nattha

 

See the Pen ROymbz by jama1017 (@jama1017) on CodePen

Link to comment
Share on other sites

  • 4 months later...
On 6/11/2020 at 1:57 PM, ZachSaucier said:

Hey nattha and welcome to the GreenSock forums! Thanks for supporting GreenSock by being a Club GreenSock member.

 

@chrisgannon actually already made a little library for using ScrollTrigger with Lottie. Check it out.

Is there a way to have a Lottie Animation play (or scrub on scroll ) when nested in another section that is pinned?

 

Link to comment
Share on other sites

  • 6 months later...

Hi!  I'm trying to create something similar to the question above.  In my example, I'd like all elements to remain pinned while the scroll animation takes place, then un-pin upon completion.  Currently, the lottie will only animate if I pin the parent container.  If I pin the main container for the project, that achieves the pin behavior that I'm looking for, but the lottie doesn't animate.  


I'm relatively new to this, so apologies if this is a ScrollLottie question and not a ScrollTrigger question.  Thanks in advance!  

See the Pen mdWdgOm by cefaijustin (@cefaijustin) on CodePen

Link to comment
Share on other sites

Is this what you're looking for? 

See the Pen mdWydEb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

A few notes:

  1. You don't need ScrollLottie - you can use the helper function from our docs. It's actually more flexible and performant. 
  2. You had some issues caused by margin collapsing on the header, and the width of some items were set to 100vw which led to a horizontal scrollbar. That looked weird to me, so I set overflow-x: hidden. 
  3. You had a bunch of <script> tags at the bottom of the HTML loading some old GSAP files and some extra things that weren't necessary. 

Is that any better? 

  • Like 3
Link to comment
Share on other sites

Man, you guys are amazing.  Yeah, that's exactly what I was going for, thank you so much.    

One question though - the target is set to start at "center center" - which makes sense as it fires right where it's supposed to, but in the LottieScrollTrigger function the "st" variable is set to start at "top top".  What exactly is happening there?  

Again, thank you.  I really appreciate you taking the time!! 

Link to comment
Share on other sites

22 minutes ago, jcdev said:

the target is set to start at "center center" - which makes sense as it fires right where it's supposed to, but in the LottieScrollTrigger function the "st" variable is set to start at "top top".  What exactly is happening there?  

Yeah, those are essentially defaults. So if you pass in something else, that'll override those values. That function is intended to be reusable for anyone - you don't need to mess with anything inside there. 

 

23 minutes ago, jcdev said:

Man, you guys are amazing.  Yeah, that's exactly what I was going for, thank you so much.    

🎉  🙌

 

Happy tweening/scrolling!

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Hey all, I'm back with another question!  I'm having a bit of a spacing issue when using multiple animations here.  The first animation executes perfectly, but the second one is coming in a bit early here (really early on the production page I'm working on).  I've read through the docs in regards to pinning, and I've tried using different end values with no luck.  Any help is appreciated,  thanks! 

See the Pen gOmEagM by cefaijustin (@cefaijustin) on CodePen

Link to comment
Share on other sites

Hey @jcdev

 

Since you are pinning the entire .main container for the section above and below to be visible, the upcoming ScrollTrigger can not adjust its position to the previous pin-duration just like that because all the elements are inside that pin-spacer that creates the pin-spacing - see what I mean?

 

So one way to get the start of the second ScrollTrigger to be correct, would be to add in the duration of the previous pin into calculating when to start the second ScrollTrigger. You'd have to do that for later ScrollTriggers, too.

 

See the Pen 46c005c7e02c2af18eb79c7a75c246c8 by akapowl (@akapowl) on CodePen

 

 

 

But in the brand new released v3.7.0 there is a new pinnedContainer property - first mentioned in this thread here:

 

 

 

 

I'm not entirely sure this is the intended way to use it but I guess it's one possible scenario.

 

If I'm getting it right, it will take the pinning-durations of that container specified in there into account, which appears to be ideal in cases as such - adding  pinnedContainer: '.main' to your second ScrollTrigger appears to be working like a charm here.

 

I also added a third element to make sure it still works - and it does.

 

Hope this helps. Happy tweening :) 

 

See the Pen 96ec6e6dadf7b73d11e38cda125d8920 by akapowl (@akapowl) on CodePen

 

 

 

 

  • Like 2
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...