Jump to content
Search Community

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

fawad4Real test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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.

image.png.66697cbe8891b051792b332004658196.png

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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. 

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