Jump to content
GreenSock

mkurdziel

Control animation with draggable problem

Recommended Posts

Hi, i have problem with smooth SVG elements animation controlled by draggable. Its not working properly, pls check codepen 

See the Pen XKEzxm.%C2%A0 by mkurdziel (@mkurdziel) on CodePen

First thing is that not every element in animating, whats more, some of them are not coming back after animating.

I think that TweenMax.ticker.addEventListener("tick", updateVelocity); is not working properly, pls check console. As you can see, its not registering all of the "move" there are gaps between numbers e.g. 100, 105, 107. It should be 100, 101, 102, 103 etc.

 

Do you have any idea to resolve this problem?

See the Pen XKEzxm by mkurdziel (@mkurdziel) on CodePen

Link to comment
Share on other sites

The ticker works fine. It should update around every 16ms or so under normal conditions. Your draggable could move any distance in that time frame. 

 

Making your animation work correctly is going to require some work. You have to record the time and position of your draggable on every tick. You then have to calculate the distance traveled between frames to determine which lines should be animating. You then have to figure out the animation time that each line should be at. 

 

Here's a particle emitter that has all the logic you need to make this work. It all happens in the update function. 

See the Pen oLGBXy?editors=0010 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

Thanks for the answer. It's almost working, there is only one problem with freezing animation on moving back with draggable. Please check it: 

See the Pen XKEzxm by mkurdziel (@mkurdziel) on CodePen

Link to comment
Share on other sites

Looks good! The freezing happens because you are interrupting the animations, causing the start value to change. The animations should start at y=0, but if you interrupt it when y=5, it's going to yoyo back to 5 because that is the new start value. 

 

Check this out. I created the animations ahead of time to prevent that problem. I also added in the time adjustment. It won't be as noticeable with the sine wave, but if you change your animations back how you had them and replace the -time value with 0, you'll notice a stepping pattern in the lines.

 

See the Pen 0333c5b6424e6af5011f0def3a5b76ba by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

Wow! You are amazing:) Thank you very much for help!

Link to comment
Share on other sites

  • 3 months later...

Hi again!

 

I'm going to add next feature to my draggable element but also this time i have some problems with animations.

I want to add a possibility to click on one of the six bigger points on timeline and then animate our cursor there with proper animations.

 

I was trying to achieve that by code inside "Simulation of cursor movement" comment on the top of js code but it's not working as i properly.. as you can see.

 

Thanks for help!

 

The new codepen:

See the Pen YpyrRe by mkurdziel (@mkurdziel) on CodePen

Link to comment
Share on other sites

You just need to track the x position of the element instead of the draggable in the update function. Just make sure you don't call the startTracking/stopTracking function out of turn if a click or drag action gets interrupted.

See the Pen XNdXKV?editors=0010 by osublake (@osublake) on CodePen

 

I noticed your demo was using an older version of GSAP, and when I updated it, it started causing infinite loops. I'm not sure what the cause of it is, but I added a little check to the update function to prevent it.

 

 

.

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

Hello!

 

My site is already online (http://capemorris.agency/) but there is one more issue with draggable element. Everything was ok, but suddenly trigger element starts to lagging (it's "micro" shaking during the move) and sometimes you can't grab element with mouse cursor (pls try to do it few times to see the issue). I thought there can be conflict with other lib's im using, but then i saw the same problem on older codepen (which was working for 100%). Any idea how to solve this one?

Link to comment
Share on other sites

Cool site! 

 

Let me guess - this is only a problem in Chrome, right? (Chrome recently added PointerEvents which have some strange behaviors)

 

Two potential solutions to try:

  1. Update to GSAP 1.19.1.
  2. Set allowNativeTouchScrolling:false on your Draggable instance. 

Do either of those help? 

  • Like 1
Link to comment
Share on other sites

Thanks!

 

You're right, it was only in chrome. Your solution works perfect!

I needed to update GSAP and set allowNativeTouchScrolling:false as you said.

 

Thanks again for the help, really appreciate it!

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