Using Draggable to control lottie animation

[thehaes]

Hey guys,

sorry for no codepen this time...I wanted to check if it's possible first and ask if you know any demos that try this approach. I was trying to find any examples but from what I see no one tried to do it yet. While I wait for the answer I am working on a demo.

 

I have a lottie animation - it's a 3d model being rotated 360 degrees. I want to be able to drag on x axis to "rotate" that 3d model, without using any UI element - just simple drag anywhere on the area to start rotating. 

 

So first of all, is it even possible to use draggable this way? 

Maybe there are some demos that show control of lottie with drag on mouse x? All codepens I saw were using scrolltrigger to control the animation, but I can't do that. Maybe observer is also an option?

[akapowl]

 

Hello @thehaes

 

3 hours ago, thehaes said:

So first of all, is it even possible to use draggable this way? 

That should definitely be possible...

 

3 hours ago, thehaes said:

Maybe observer is also an option?

 

... and sure, Observer could also be leveraged for doing something like that.

 

3 hours ago, thehaes said:

All codepens I saw were using scrolltrigger to control the animation, but I can't do that.

 

What the ScrollTrigger driven example/s (e.g. the LottieScrollTrigger helper function) do in the end is just update a tween that updates the lottie-animation's visible frame via an object, depending on the scroll-position within certain parameters.

 

What you could do with Draggable e.g. is create a proxy element that you use as the target of the Draggable, similar to how the demo for updating a fake-horizontal-scroll-tween via Draggable does...

 

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

 

 

 

...and implement some logic onDrag to update that aforementioned tween setting the lottie-animation's visible frame.

Here's a quick stab at some logic for that. It's not tested to the fullest and I don't know if it works how you expect it to work - so this is mainly just to get you inspired.

 

GSAP delivers all the tools you need to create something like that. What you do with those tools and how to handle them / the underlying logic so they work how you expect them to work is up to you as a developer to find out in the end.

 

What will definitely come in helpful is having a look at GSAP utils alongside Draggable itself.

 

https://greensock.com/docs/v3/Plugins/Draggable

https://greensock.com/docs/v3/GSAP/gsap.utils

 

I hope this will help a bit. Happy Dragging.

See the Pen LYMVNxo by akapowl (@akapowl) on CodePen

 

[thehaes]

Thanks!

That's actually what I was thinking about, I didn't expect you to do so much for me, so double thanks! I've adjusted your demo to my needs now and it works!

[thehaes]

Actually, I've been playing some more with this and I've forked your codepen @akapowl

I've tried to make it loop, so you can rotate 3d object seamlessly, but it only works in one direction, because my javascript knowledge isn't good enough to check for drag direction.

 

I was thinking about gsap helper function for draggable loop I used before, but I think it only works when there are "items" in container - for example like a slider with multiple divs inside. I tried tu replace "items" with "frame" in helper function, but it doesn't seem to work. Is there any easy way of doing this or it would require some logic like I tried to implement (with checking the drag direction and resetting the timeline when it reaches first/last frame)

 

See the Pen wvRaRZa by thehaes (@thehaes) on CodePen

[akapowl]

4 hours ago, thehaes said:

I've tried to make it loop, so you can rotate 3d object seamlessly, but it only works in one direction, because my javascript knowledge isn't good enough to check for drag direction.

 

That is a matter of logic first and foremost.

 

Have you taken a look at the link for the utils I used in my pen that I included above?

 

https://greensock.com/docs/v3/GSAP/gsap.utils

 

This is what the docs say about .clamp(), the first method I use in the onDrag callback:

https://greensock.com/docs/v3/GSAP/UtilityMethods/clamp()

 

Quote

Clamps a number between a given minimum and maximum.
If the number you provide is less than the minimum, it will return the minimum.
If it's greater than the maximum, it returns the maximum.
If it's between the minimum and maximum, it returns the number unchanged.

 

I used that in my example because I specifically did not want the moved-value to go beyond 0 in one direction and beyond the window's innerWidth in the other direction at any given point - so now it won't update beyond 0 if you drag to the left e.g .

Now from a logical point of view, when wanting to have it loop seamlessly in any direction, that is exactly the behaviour that you will not want then.

 

You'll want to allow that value to update further when you drag to the left e.g. - but you also need to wrap it around to the opposite edge of your given range once it hits any of the edge values.

 

And there is another handy util that will do exactly that for you - .wrap() - please have a read in the docs.

 

Here's a broken down explanation of what it does iny my own words, leaned on the explanation for clamp:

 

It also technically 'clamps' a number between a given minimum and maximum -  but with a twist.
If the number you provide is less than the minimum, it will return the maximum instead.
If it's greater than the maximum, it returns the minimum instead.
If it's between the minimum and maximum, it returns the number unchanged.

 

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

So actually for my example to become inifinitely looping in any direction, it would be as easy as replacing the method clamp() with wrap() [and of course change the frames in the .fromTo lottieTween accordingly, like you already did on your own].

 

That should work more like you had in mind, right?

 

See the Pen dywoEOL by akapowl (@akapowl) on CodePen

 

[thehaes]

Ahhh, I feel so stupid now...I know about clamp (didn't know about wrap though :O), but I was convinced that it clamps the bounds of the container for drag event...I'm really not sure now why I thought that's the case haha

 

And oh my god, big thanks again - I think since first time I used gsap I was focusing too much on visual side of animation, timings etc. and not on the technical side of things. I convinced my company to buy the gsap membership and now I am reading what you wrote and the docs 10000 times in a row now - it takes me more time to understand as I'm not really a mathematical brain and more on a creative side 😄

 

Thank you again for patience and help. I assure you this was the last time, as this is EXACTLY what I needed now