Jump to content
Search Community

Trouble with SVG animation

Yayoar 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

Hello together,

 

i have some troubles with my first GSAP animation. Basically i want to animate the "swap-part" of the Quicksort-Algorithm.

Therefore i have a svg-element with some rect-elements, but when the algorithm starts it doesn´t wait for the animation to finish and continues with the while-loop and the rect-elements move in a strange way. In the Codepen you see the extract of my code with the incorrect behavior.

I appreciate any help. Thanks.

See the Pen wqVJGB by Yayoar (@Yayoar) on CodePen

Link to comment
Share on other sites

I don't have time to rewrite your code right now, but I think the problem is that you wrote it in a way that depends on reading/writing the actual values that you're animating from within the loop (like, each iteration of the loop depends on the animation having already completed and altered the values). I think it'd be much better to just maintain the destination values as their own separate properties or variables or something. For example, instead of reading eleB.getAttribute("x"), you'd track the destination values like eleB.destX. That's also make things faster and cleaner, since you don't have to constantly be converting them from strings to numbers. And then you'd still animate the "real" values/attributes in your tweens - you'd just be keeping the destination values separate. 

 

Does that help at all? 

  • Like 1
  • Thanks 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...