Jump to content
GreenSock

vchoo27

Lottie animations play when in view (GSAP ScrollTrigger)

Recommended Posts

Hi, I wanted to trigger 3 different lottie animations when scrolled into view. They share the same Json animation URL but I want them to end at different percentages while setting the duration to play faster, as well as set different delay times (first one plays first, then the second one starts, followed by third).

 

The struggle I have is having each end at different percentages, setting duration, and setting delay times.

 

Greatly appreciate any advice, thank you!

See the Pen YzaKbad by vchoo (@vchoo) on CodePen

Link to comment
Share on other sites

We actually have a helper function in the docs for Lottie files that would probably be useful here. Cuts down on the amount of code you need to write substantially. 

 

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

 

Does that help? 

Link to comment
Share on other sites

By the way, you could create that effect with a very simple SVG and eliminate Lottie altogether in probably 1/20th the amount of kb. DrawSVG for the line drawing, and then animate the text content with snapping enabled. It's fine to use Lottie if you prefer, of course. I'm just pointing out it could be done with nothing but GSAP and native SVG elements. 

Link to comment
Share on other sites

Thank you so much! Is there a way (if I keep using Lottie) to have each animation stop at different percentages (ex. first one will stop at 30%, second 80%, and third 32%)?

 

Are there example snippets using DrawSVG + scrollTrigger with similar end goal that I can reference?

 

Greatly appreciate your help!

Link to comment
Share on other sites

7 hours ago, vchoo27 said:

Is there a way (if I keep using Lottie) to have each animation stop at different percentages (ex. first one will stop at 30%, second 80%, and third 32%)?

 

You could extend the helper function with an argument/parameter for the targetted frame you'd want to end on.

 

Something like in the pen below - but please note, I just quickly threw it in there without thinking of it too much, i.e. without thinking of side-effects that might possibly come with it. Also from a GSAP API perspective this sort of feels weird, because that place where I set the frame to target there, usually (in timelines) is reserved the position parameter - so just think of this as a suggestion for now :) 

 

LottieScrollTrigger({
  target: "#natural-gas",
  path: "https://assets3.lottiefiles.com/packages/lf20_hr1knadb.json",
  scrub: false,
  pin: false,
  duration: 2,
  delay: 0.4
}, 120); // <---- You've got 240 frames in total, so 120 would go to 50%
	 // If you don't set anything here, it will go to 100% as before




// helper function
function LottieScrollTrigger(vars, targetFrame) { // <----- don't forget to add the parameter
	
  // ...

    gsap.to(playhead, {
 
      // ...
      
      frame: targetFrame || animation.totalFrames - 1,  // <----- 
							// tweens to either the targetFrame you defined
							// or to the end, if none was defined

      // ...
      
    });   
    
    // ...
    
}

 

See the Pen oNqNjpK by akapowl (@akapowl) on CodePen

 

 

 

 

Edit:

Also, here is an idea for an approach with drawSVG ...

 

See the Pen xxWxwMv by akapowl (@akapowl) on CodePen

 

 

 

... with this as a basis. Maybe it will help.

 

See the Pen poLogwY by akapowl (@akapowl) on CodePen

 

 

 

Edit 2:

And just to show how to possibly extend this even further, here is another version where you can also feed in a value for the start percentage from where to tween. Happy Tweening!

 

See the Pen VwXweJy by akapowl (@akapowl) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Thank you so so much! Will reference these and give it another go!

Link to comment
Share on other sites

11 hours ago, akapowl said:

You could extend the helper function with an argument/parameter for the targetted frame you'd want to end on.

Or a percentage/progress value, like this: 

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

 

(I figured that might be easier than a frame number because you may not know ahead of time how many frames there are). 

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