Jump to content
GreenSock

PointC

Draggable control animation until released

Recommended Posts

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

 

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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.

 

:)

Link to comment
Share on other sites

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

 

 

 

  • Like 2
Link to comment
Share on other sites

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

 

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. 

:)

 

 

 

 

 

 

  • Like 1
Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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

 

 

  • Like 4
Link to comment
Share on other sites

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.

 

:)

 

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