Draggable control animation until released

[PointC 8,599 Likes (Superhero)]

Hey everyone

 

I've linked a draggable to other animations many times, but they always start/stop with the onDrag event. In this case, I need the animation to be based on the draggable onDrag position and it needs to continue animating until I release the draggable.

 

The animation stops on release and the draggable element tweens back to 0.  The simplest thing I could think of was using the ticker adding a listener onPress and removing it onRelease. Is this the best way to approach this? Anything more efficient or easier?

 

See the Pen RLdqqj by PointC (@PointC) on CodePen

Thanks.

 

[GreenSock 8,117 Likes (Superhero)]

How about something like this?:

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

 

I just create a repeating tween for the spin, and adjust its timeScale() according to the position of the Draggable. Is that the effect you're after? 

[PointC 8,599 Likes (Superhero)]

Hey Jack,

 

Sorry, I should have mentioned this is not something that can have the timeScale() animated on the tween. The demo is a simplified version of what I need. The actual project draggable element will be x/y, +/- controlling another SVG element much like a joystick.

 

[OSUblake 9,990 Likes (Superhero)]

Hi @PointC

 

The way control inputs, e.g. keyboard, joysticks, and gamepads, are usually done is by checking what the state of the input is on every animation frame. So what you have is fine.

Somewhat related, but advanced demo. Reacting to keyboard inputs on every animation frame.

 

See the Pen 8ee3affa03bbc5f01e03d14a3f7c3508 by osublake (@osublake) on CodePen

 

 

 

[PointC 8,599 Likes (Superhero)]

Well, look who's back. I was just about to post some 'Missing' posters around the forum. 

 

That demo is slick! It might be a bit above my pay grade, but I'll have to take a closer look at that code. Very cool and buttery smooth. 

 

 

 

 

 

 

[OSUblake 9,990 Likes (Superhero)]

Creating a camera is much simpler than that demo lets on. I should make a simple version of that.

 

So are you trying to create a virtual joystick, kind of like here?

http://jeromeetienne.github.io/virtualjoystick.js/examples/basic.html

 

[PointC 8,599 Likes (Superhero)]

hmmm.... that's pretty cool and gives me some more ideas.

 

The current project is a SVG joystick controlled viewBox with zoom controls moving into and around a store. I've made several SVG 'camera' animations, but they're always hard coded tweens. This is the first time I'm trying one that's controlled by the user. Should be interesting.

 

Thanks for the virtual joystick link. That is now bookmarked.

 

[OSUblake 9,990 Likes (Superhero)]

Simple Camera is simple! 

 

Pretty much the same process as centering an object inside another object.

 

See the Pen WZmWOV by osublake (@osublake) on CodePen

 

 

[OSUblake 9,990 Likes (Superhero)]

For SVG viewBox, everything you need is probably in this pen.

 

See the Pen oGoyYb by osublake (@osublake) on CodePen

 

[PointC 8,599 Likes (Superhero)]

That's great Blake. Thank you.

 

I already had your new viewBox demo bookmarked, but I'm adding that Word Camera to the bookmarks as well. With my existing knowledge and those pens as cheat sheets, I should be able to to get to the finish line of this project without too much trouble. Thanks again.