lottie How to create two sections where I can scroll Lottie animation (left) and Text (right) togather and snap lottie to specfic keyframes.

[fawad4Real]

Hi, and Thanks in Advance; I need to create two sections. The parent div will be pinned, and you can scroll a Lottie animation on the left and text on the right together and snap the Lottie animation to specific keyframes. For example, I have a Lottie animation where it shows a bulb, then transforms into a notebook and then into a tablet. Simultaneously, on the right side section, I have a div with text in it. so when the animation is at bulb I want to show text bulb {initaily},then I scroll and if the animation is at the notebook I want to show notebook in the div text area. And if the animation is in between, snap to the nearest keyframe of a bulb or notebook and so on. and when the Lottie animation ends then unpin parent section.

You can see the example if the website: https://www.brandnewschool.com/ if you scroll down. I am really stuck here.

See the Pen abMJYEo by Fawad4real (@Fawad4real) on CodePen

[fawad4Real]

Can Someone Help me Please?

[Rodrigo]

Hi,

 

Please be a bit more patient when it comes to receiving an answer. We do our best trying to answer questions as fast as we can.

 

We have a ScrollTrigger-Lottie helper function that could come in handy:

https://gsap.com/docs/v3/HelperFunctions/helpers/LottieScrollTrigger

 

But maybe in this case just creating your own timelines with some logic extracted from it could be the way to go:

See the Pen JjzWaar by GreenSock (@GreenSock) on CodePen

 

As for the snapping goes, you'll have to find out the total frames of the lottie file and translate that into a percentage expressed between 0 and 1 in order to feed that array to the snap option in ScrollTrigger. Right now the snap functions snaps to the start, middle and end points of the timeline.

 

Hopefully this helps.

Happy Tweening!

[fawad4Real]

when I Scroll to last i see the same animation again in static mode why ?

[GreenSock]

I forked the CodePen and tweaked the helper function so that you can just pass in a timeline that already has animation in it, and it'll just stretch the Lottie animation to play alongside that: 

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

 

Is that what you're looking for? 

[fawad4Real]

Thanks a Lot. Now just I would like the animation to start from frame 10 instead of frame zero. Additionally, when the animation concludes, I want it to stop 10 frames before the last frame (10 frames before the total number of frames).

Explanation:
before start hit scroller-start my animation is not visible... but I want to keep it visible at start also (for example at 10 frames) so its there on the screen and start further animation from there. and when my end hit scroller-end then pause the animation and unpin parent div but don't hide the animation( it just stay there paused). 

[GreenSock]

I edited the helper function to allow you to set a startFrameOffset and endFrameOffset: 

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

 

Is that what you want? 

[fawad4Real]

Thanks a Lot. It means so much. 

[fawad4Real]

One last thing: Now, if I scroll fast, I scroll all the way, and the animation ends too fast. I want to stop the mouse scroll on each snap. and until the animation is played and Lottie is properly snapped to its given value, only then enable mouse scroll. 

I want to do this for other sections, too. 

[GreenSock]

3 minutes ago, fawad4Real said:

One last thing: Now, if I scroll fast, I scroll all the way, and the animation ends too fast. I want to stop the mouse scroll on each snap. and until the animation is played and Lottie is properly snapped to its given value, only then enable mouse scroll. 

I would strongly recommend not doing that - it can be very confusing for users when they see the scrollbar showing that there is more to scroll, but your site REFUSES to allow them to. Imagine the user trying to drag the scrollbar, but it fights with them. Or they flick their mouse wheel but your site won't respond. In my opinion, it's terrible UX so I feel a little gross even thinking through how to help you accomplish that 🤕

 

You could re-engineer things so that you eliminate the scrollbar altogether and just listen for scroll-like events and respond accordingly. See the Observer Plugin for ways to do that. Here's a demo: 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

 

Please keep in mind that these forums are intended to be for helping with GSAP-specific questions (like about the API) - they're not for posting a list of requirements and having us build things for you according to all your specs. 🙂 If you need that kind of help, you're welcome to post in the Jobs & Freelance forum or contact us for paid consulting services. 

[fawad4Real]

I want to thank you for your immense help. Your assistance was invaluable.