vchoo27 Posted June 28, 2022 Share Posted June 28, 2022 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 More sharing options...
GreenSock Posted June 28, 2022 Share Posted June 28, 2022 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 More sharing options...
GreenSock Posted June 28, 2022 Share Posted June 28, 2022 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 More sharing options...
vchoo27 Posted June 28, 2022 Author Share Posted June 28, 2022 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 More sharing options...
akapowl Posted June 28, 2022 Share Posted June 28, 2022 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 1 Link to comment Share on other sites More sharing options...
vchoo27 Posted June 28, 2022 Author Share Posted June 28, 2022 Thank you so so much! Will reference these and give it another go! Link to comment Share on other sites More sharing options...
GreenSock Posted June 28, 2022 Share Posted June 28, 2022 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). 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now