Jump to content
Search Community

Draggable control animation until released

PointC test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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 ?editors=0010 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

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