Jump to content
GreenSock

Jeff S

Reording SVG Elements creates inconsistent animation

Go to solution Solved by Jonathan,

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

Use case:

As a user, I want to be able to modify the order of the SVG elements and be able to animate predictably afterwards.

 

Codepen:


 

Steps to reproduce:

  1. Hit the "Go Left" and "Go Right" buttons, this is correct baseline animation I want to preserve.
  2. Then if you restack the elements by hitting Order +, it will remove the element and reposition it above.
  3. When you hit "Go Left and "Go Right" again, the animation is slightly changed.
  4. Now if you hit "Order -" the element will reposition below.
  5. Hit "Go Left" and "Go Right" again, the animation is different.
Repeating steps 2 through 5 will make the animation progressively worse.

 

In the fixMatrix function, I log the transform element.  As you can see, the xOrigin and yOrigin values change each time the stacking order is modified.

 

At this stage, I don't know what to propose for a solution, so I am just opening the dialog about this issue.

See the Pen pgYmzV by anon (@anon) on CodePen

Link to comment
Share on other sites

Hello Jeff S

 

One thing to keep in mind is that z-index and CSS transforms do not play nice together due to when their composited and painted.

 

But i don't see any z-index properties at all in your code.

 

So i have some questions:

  • I do not see anywhere in your code where your applying z-index CSS property. I just see that your cloning and appending elements, but no z-index
     
  • Why do you not have position absolute or relative on your elements your animating? (this helps with animating your element consistently, also z-index only comes into play when your element have position absolute, relative, or fixed)
     
  • Also i was wondering why you are using a fixMatrix() function instead of just allowing GSAP to control and animate your transform?

I also noticed you are using jQuery clone(). When using jQuery clone() method you should avoid cloning elements with id attributes .. since that will be copied over as well. And then you will have multiple elements cloned with the same id which can cause namespace issues, since the id attribute and the name attribute share the same namespace in the DOM. That will cause conflicts so it is better to use a class instead of id.

 

We will need some additional info, especially why you have no z-index property in your code so im not sure what the purpose of the z-index buttons.

 

Thanks ahead of time for any additional info :)

  • Like 3
Link to comment
Share on other sites

Hi Jonathan,

 

I have changed my example and codepen code so that "Z-Index +" now says "Order +" and "Z-Index -" now says "Order -" to reduce confusion.  You correctly observed that I wasn't using CSS z-index properties and I can see how this could cause confusion.  Hopefully this alteration will make it less confusing.

 

My goal with GreenSock is to create vector illustrations and make slight modifications to those illustrations which will allow me to animate from one variation to another extremely rapidly.  The codepen example uses a process extremely similar to how I am going about things.  In particular, there is no CSS involved.  I am working on a process that will allow very complex animations in as little time as it takes for an illustrator to move some vectors around and upload some files.  If I were to add CSS into the mix, it would make the process a lot more tedious and essentially defeat the purpose of what I am working towards.  So I am really hoping for a CSS-free solution to this problem.  I am looking for something along the lines of the fixMatrix (javascript solution) which will keep the workflow to a minimum.

 

If you refer to this thread, you can see that I am doing some weird things that were never anticipated to be done with these libraries and explains better the necessity for the fixMatrix function.  

 

I understand your point with the jQuery clone function.  In my example, I am removing the element first and then putting it in a different position in the DOM. So there should never be any namespace collision. 

 

When you click the "Order +" and "Order -" buttons and you observe the image, you will notice the stacking layer of the SVG elements change.  It is basically just changing 

<g id="layer1">
<g id="humerous" ...></g>
<path id="forearm-4" ...></path>
</g>

to

<g id="layer1">
<path id="forearm-4" ...></path>
<g id="humerous" ...></g>
</g>

and back.

 

There seems to be some transformations under the hood (like we had with fixMatrix) causing some undesirable behaviour for me.  And the more the elements are reordered, the more compouned the undesirable behaviour becomes.

 

Let me know if that clears things up Jonathan or if you have any other questions.

Link to comment
Share on other sites

I also want to note, that it is the combination of reordering the elements AND executing an animation that causes the undesirable behaviour.   

 

You will notice that you can reorder the elements 20 times and then animate and it looks pretty good.  You can then animate 20 times and the behaviour is still consistent.  You have to reorder, animate, reorder, animate .... several times to see the behaviour compound like I am talking about.

Link to comment
Share on other sites

  • Solution

z-index wont work on SVG anyway.. so i see why you are just trying to reorder the DOM. :D

 

Instead of cloning and removing from the DOM. i would just store the element you want moved in a variable and then append / prepend that element. This way your not removing the element from the DOM, your just simply reordering it.

 

Does this help?

 

See the Pen EPJaQp by jonathan (@jonathan) on CodePen

 

So i changed this:

$("#humerous-up").on("click", function() {
  var clone = $("#left-humerous").clone();
  $("#left-humerous").remove();
  $("#layer1").append(clone);
});

$("#humerous-down").on("click", function() {
  var clone = $("#left-humerous").clone();
  $("#left-humerous").remove();
  $("#layer1").prepend(clone);
});

To this:

$("#humerous-up").on("click", function() {
  var clone = $("#left-humerous"); // no clone() or DOM remove()
  $("#layer1").append(clone); // just appends the element in the DOM without removing the DOM node
});

$("#humerous-down").on("click", function() {
  var clone = $("#left-humerous"); // no clone() or DOM remove()
  $("#layer1").prepend(clone); // just appends the element in the DOM without removing the DOM node
});

I removed that clone of the element and just append / prepend that element in the DOM. No evil clones or DOM remove! So this doesn't look like a GSAP related question but more of a DOM and jQuery issue. But the above should help! ;)

 

Let us know if that helps?

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