Jump to content
Search Community

Lottie animation in a GSAP timline that is bound an input slider

JacobFerdinandS test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hi there,

does anyone know how I can bind that slider I createt using dragdealer to a lottie animation?

I know that you can bind a timeline to an input like this, but i dont know how to translate to the right frame of a lottie animation.


I would really appreciate any help, thanks.

See the Pen NWzjVRv?editors=1111 by jacob-nagelschmidt (@jacob-nagelschmidt) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @JacobFerdinandS welcome to the forum! 


This is almost the same question I'd answered a few days ago. At least the solution is the exact same, what are the chances!? 🤣


I have no idea how the plugin Dragdealer works, and I have no time to figure it out. So I've changed that to the Draggable plugin (here are the docs) that is build for GSAP. Then the same as the topic linked above, "when in doubt use a timeline instead of a single GSAP tween, you'll get much more control!". Then it was just a question of updating the progress of the timeline, based on the drag position, see the linked topic for a more detailed explanation.


Hope it helps and happy tweening! 


See the Pen qBKmeEx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen


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