Jump to content
Search Community

Cloning a dom node with xPercent...

lovezjk 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


i'm using xPercent for making slideshows with one or more slides moving at once.

For making infinite roll i need sometime to clone lasts/first childs, but as they are xPercent-ised when i clone them i get this behavior...


The node has :

transform: translate(800%, 0%) matrix(1, 0, 0, 1, 0, 0);


the div is 211.983px, when cloned and setted to -100 (getting it before the first slide) it has then :

transform: translate(-100%, 0%) matrix(1, 0, 0, 1, 1695.87, 0);


so it computes 800% width in matrix and apply my xPercent placement of -100.

Is it jquery that when copying the node properties, make that move ?


Luckily, i found a way to mitigate that by using clearProps:"xPercent"

and setting it again after.



Link to comment
Share on other sites

One of the most convenient things GSAP provides is a consistent way to deal with transforms in a completely independent fashion - overlap scale, position, rotation, and/or skew animations however you want. In order to do that, it must keep track of that transform-related data which it does by attaching a "_gsTransform" object to the node itself. That object has "rotation", "scaleX", "scaleY", "x", "y", and other properties (including xPercent and yPercent). It sounds like when you cloned your node, that _gsTransform didn't come with 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.
  • Create New...