Jump to content
Search Community

Help With Displaying Text Based On Scroll Position With Lottie Animation

jackierfp test
Moderator Tag

Recommended Posts

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

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!

  • Like 2
Link to comment
Share on other sites

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

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

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?  

  • Like 2
Link to comment
Share on other sites

@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

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

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

 

👍

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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 !

 

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