Why Gshock changes value

[Neekit]

var filePush = TweenMax.to(fileHolders,2, {transform:'translate(1.1361%, 0%) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)'});

 

i insert the above value in time line but the value is changed to a matrix
transform: matrix(1, 0, 0, 1, 0, 0);

script.js

[Rodrigo]

Hi and welcome to the GreenScok forums.

 

After reviewing your file, we have some advice to you as it seems you're not very familiar with some key-core concepts about GSAP.

 

First and most important in order to simplify and speed up the support process, we advise users that they create a reduced sample in codepen that illustrates the issue they are having. To learn how to do that please look at this post and video from @Carl

 

Second, among many amazing tools, GSAP has the CSS Plugin, that takes cares of any non-experimental CSS property you want to animate in a DOM element. Having said that, in your file we could spot quite a few of these:

 

var tween = TweenMax.to(sec, 1, {transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 421.8, 1010.15, 0, 1)'});
var tween2 = TweenMax.to(sec, 1, {transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1004.58, 1011.1, 0, 1)'});
var tween3 = TweenMax.to(sec, 3, {transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1008.7, 3100, 0, 1)'});

 

Now for what I see mostly you're applying a 2D translate in these cases. Well GSAP has you covered, all you need is to pass x and y values to it:

 

var tween = TweenMax.to(sec, 1, {x: 421.8, y: 1010.15});
var tween2 = TweenMax.to(sec, 1, {x: 1004.58, y: 1011.1});
var tween3 = TweenMax.to(sec, 3, {x: 1008.7, y: 3100});

 

Quite simpler and cleaner, right?

 

If your concern is passing the animation to the GPU, no worries, when animating any type of transform property, GSAP uses a transform matrix for you, so it gets rendered by the GPU on it's own layer.

 

You can read more about the CSS Plugin here:

 

https://greensock.com/docs/Plugins/CSSPlugin

 

The final issue is applying more than one GSAP instance on the same element and the same properties at the same time. When that GSAP overwrite manager will kill any pre-existing tween and apply the new one. In your case it kind of works like this:

1. You create tween, the instance read the start and end values, and then starts to apply the updates to the css styles.
2. A few milliseconds later you create tween2, GSAP sees that the target is already being animated and the properties are the same, it kills the existing tween, records the start and end values and start applying the updates to the css styles.
3. A few milliseconds later you create tween3, same as #2.

If you want to concatenate a series of animations during time, my advice is to create a timeline. Here is an extract from the docs, regarding overwrite:

 

overwrite:  String (or integer)  - Controls how (and if) other tweens of the same target are overwritten. There are several modes to choose from, but "auto" is the default (although you can change the default mode using theTweenLite.defaultOverwrite property):

• "none" (0) (or false) - no overwriting will occur.
• "all" (1) (or true) - immediately overwrites all existing tweens of the same target even if they haven't started yet or don't have conflicting properties.
• "auto" (2) - when the tween renders for the first time, it will analyze tweens of the same target that are currently active/running and only overwrite individual tweening properties that overlap/conflict. Tweens that haven't begun yet are ignored. For example, if another active tween is found that is tweening 3 properties, only 1 of which it shares in common with the new tween, the other 2 properties will be left alone. Only the conflicting property gets overwritten/killed. This is the default mode and typically the most intuitive for developers.
• "concurrent" (3) - when the tween renders for the first time, it kills only the active (in-progress) tweens of the same target regardless of whether or not they contain conflicting properties. Like a mix of "all" and "auto". Good for situations where you only want one tween controlling the target at a time.
• "allOnStart" (4) - Identical to "all" but waits to run the overwrite logic until the tween begins (after any delay). Kills tweens of the same target even if they don't contain conflicting properties or haven't started yet.
• "preexisting" (5) - when the tween renders for the first time, it kills only the tweens of the same target that existed BEFORE this tween was created regardless of their scheduled start times. So, for example, if you create a tween with a delay of 10 and then a tween with a delay of 1 and then a tween with a delay of 2 (all of the same target), the 2nd tween would overwrite the first but not the second even though scheduling might seem to dictate otherwise. "preexisting" only cares about the order in which the instances were actually created. This can be useful when the order in which your code runs plays a critical role.

Remember, please do your best to create a reduced case sample so we can take a better look at it and that illustrates what you're trying to achieve.

 

Happy Tweening!!