jackierfp Posted March 23, 2021 Share Posted March 23, 2021 Hello, I am new to GSAP and Lottie. I am working on a project where I am scrubbing through a Lottie animation with the https://github.com/chrisgannon/ScrollLottie that was referenced in their documentation. I want to be able to control what text will display based on where the user has scrolled on this Lottie and I'm having trouble deciding how best to accomplish this. Any help would be appreciated. See the Pen PoWwBrg by jackrie (@jackrie) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted March 23, 2021 Share Posted March 23, 2021 Welcome to the forums, @jackierfp Are you just asking a generic question about how to make some text in the DOM animate in based on scroll position? If so, there are lots of demos you could pull that from or the docs. Or are you saying you want pieces of your Lottie animation to get triggered at various places? I'm not a Lottie guy, but we're happy to answer GSAP-specific questions here. You'll have a much better shot at getting answers if you provide an absolute bare minimum demo. Like literally just have one or two text blurbs and try to get it wired up to the scroll position or show us what you're hoping to have happen. Happy tweening! 2 Link to comment Share on other sites More sharing options...
jackierfp Posted March 24, 2021 Author Share Posted March 24, 2021 Hello, Thanks for responding! There are a few things I am trying to accomplish. I am trying to use ScrollTrigger to bring in the Lottie animation. Use Scroll Lottie to scroll through that animation and show different text parts for different frames of that animation. Then once the Lottie is scrolled to the end un-pin the animation and bring up another portion of the website along with the footer. I've gotten kind of close but the Scroll Lottie is repeating and I'm not sure why. I also am not sure about how to show the different text based on where you are in the animation. I suppose that could be on scroll position as well, but my first thought was basing it on the animation frame. Link to comment Share on other sites More sharing options...
GreenSock Posted March 24, 2021 Share Posted March 24, 2021 You've got the doorIntro set to loop: true 18 hours ago, GreenSock said: You'll have a much better shot at getting answers if you provide an absolute bare minimum demo. Like literally just have one or two text blurbs and try to get it wired up to the scroll position or show us what you're hoping to have happen. I strongly suggest taking this approach Link to comment Share on other sites More sharing options...
jackierfp Posted March 24, 2021 Author Share Posted March 24, 2021 The doorIntro isn't the Lottie I'm scrolling, that's the one that plays automatically. Is this cleaner? I took out the intro animations as they aren't part of what I'm trying to figure out. Link to comment Share on other sites More sharing options...
GreenSock Posted March 24, 2021 Share Posted March 24, 2021 You've got a ScrollTrigger set up that then has an onEnter that creates a ScrollLottie - it seems odd to me, like why not use one ScrollTrigger to control things? Sorry, I'm not familiar with ScrollLottie and I don't have time to really dig into it. 24 minutes ago, jackierfp said: Is this cleaner? I took out the intro animations as they aren't part of what I'm trying to figure out. Not really. I mean it's good that you removed that part, but what I'm talking about is isolating only one very specific piece of functionality and removing everything that's not related to that. For example, if you want to figure out how to make text show up at different parts of the animation, create a Lottie animation that has a big "one" word that animates in (via Lottie), and then later a big "two". Then have a corresponding <div> element with the text that you want for each of those two animation sections. Try to get it to show the right text at the right time, and if you can't, post that minimal demo here and ask about it. When you try to have one demo with complex animation and just generically say "I want text to come in at different parts of the animation", I have no idea which text, where in the animation, how exactly you want it to relate to the scroll position, and I've gotta weed through a lot of superfluous code and elements to try to decipher...and on top of that, you're saying you want various other things to happen too which you can't figure out, so it gets convoluted quickly. One thing at a time, baby steps, is the best approach to troubleshooting something like this. Does that make more sense? 2 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 24, 2021 Share Posted March 24, 2021 I don’t know much about @chrisgannon's ScrollLottie other than it's pretty neat. But based upon his usage example your code seems overly complicated? See the Pen oNbjQpw by chrisgannon (@chrisgannon) on CodePen anim.goToAndStop Is that from Adobe Animate? I have not seen much goToAndStop sicne the Flash days. 😄 1 Link to comment Share on other sites More sharing options...
jackierfp Posted March 24, 2021 Author Share Posted March 24, 2021 @Shrug Yeah, I am not sure about goToAndStop either. That is part of his code. He is including it in the resources in his pen, where I included it in the JS on mine because I wanted to add the markers/id to it to differ it from the other ScrollTrigger I have set up. Thanks for taking stabs at this. I'll see if I can simplify my pen more. Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 24, 2021 Share Posted March 24, 2021 6 minutes ago, jackierfp said: I am not sure about goToAndStop either. That is part of his code. He is including it in the resources in his pen What pen, by whom? Link to comment Share on other sites More sharing options...
jackierfp Posted March 24, 2021 Author Share Posted March 24, 2021 The one by Chris Gannon you referenced: See the Pen oNbjQpw by chrisgannon (@chrisgannon) on CodePen The "Scroll Lottie" function he built it in the resources of this pen. Also available at https://github.com/chrisgannon/ScrollLottie. I just put that function he built into the JS on my pen so I could change the markers to true and add an id to it. Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 24, 2021 Share Posted March 24, 2021 😂 Oh I see now what you're saying. I would really suggest not doing that and instead use the usage that he provides for ScrollLottie. But I think @GreenSock nailed it with his last response above. 😉 1 Link to comment Share on other sites More sharing options...
jackierfp Posted March 24, 2021 Author Share Posted March 24, 2021 Update -- You guys helped me crack this. Thanks a ton for pointing me in the right direction. 😃 Link to comment Share on other sites More sharing options...
GreenSock Posted March 24, 2021 Share Posted March 24, 2021 I whipped together a helper function that was loosely inspired by Chris's work there, and it has the following tweaks: Improved performance in the way it handles scrubbing You can add any ScrollTrigger-related value to the object you pass in (trigger, start, end, onEnter, onLeave, onUpdate, markers, whatever.) so you get tons of flexibility https://greensock.com/docs/v3/HelperFunctions#lottie See the Pen QWdjEbx?editors=0010 by GreenSock (@GreenSock) on CodePen 👍 4 1 Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 24, 2021 Share Posted March 24, 2021 Oh goToAndStop is actually from Lottie, wow blast from past seeing that. 25 minutes ago, GreenSock said: whipped together a helper function Pretty soon you will need to start lazy loading entries on that page. 25 minutes ago, GreenSock said: Improved performance in the way it handles scrubbing You can add any ScrollTrigger-related value to the object you pass in (trigger, start, end, onEnter, onLeave, onUpdate, markers, whatever.) so you get tons of flexibility 😍 "Lottie" users will love this for "scroll animations". Awesome job as always with the GSAP-ification / optimization @GreenSock ! 2 Link to comment Share on other sites More sharing options...
jackierfp Posted March 24, 2021 Author Share Posted March 24, 2021 Truly amazing @GreenSock! Thanks again for all your help. 💕 1 Link to comment Share on other sites More sharing options...
chrisgannon Posted March 25, 2021 Share Posted March 25, 2021 17 hours ago, jackierfp said: @Shrug Yeah, I am not sure about goToAndStop either. goToAndStop is a Lottie/Bodymovin method to, well, go to and stop at a frame. I'm not randomly including ActionScript 2 1 Link to comment Share on other sites More sharing options...
jackierfp Posted March 25, 2021 Author Share Posted March 25, 2021 @chrisgannon Thanks for the clarification. Love your work! 😃 1 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