[Help With Displaying Text Based On Scroll Position With Lottie Animation]

@chrisgannon

 

Thanks for the clarification. Love your work! 😃

[Help With Displaying Text Based On Scroll Position With Lottie Animation]

Truly amazing @GreenSock! Thanks again for all your help. 💕

[Help With Displaying Text Based On Scroll Position With Lottie Animation]

Update -- You guys helped me crack this. Thanks a ton for pointing me in the right direction. 😃

[Help With Displaying Text Based On Scroll Position With Lottie Animation]

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.

 

 

[Help With Displaying Text Based On Scroll Position With Lottie Animation]

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

[Help With Displaying Text Based On Scroll Position With Lottie Animation]

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.

 

[Help With Displaying Text Based On Scroll Position With Lottie Animation]

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.

 

[Help With Displaying Text Based On Scroll Position With Lottie Animation]

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