Jump to content
Search Community

Tweenlite doesn't get jquery object

Maxime 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

Why Tweenlite does'nt apply to ul:{jquery object, filled} the transformation in this case :

TweenLite.set(ul, {css:{transform: 'translateY(-4000px)'}});

But this work as it should be with TweenLite:

ul.css('margin-top', '-4000px');

JSfiddle description : JSfiddle

I use the latest version of TweenJs.

Thanks for your help.

  • Like 1
Link to comment
Share on other sites

in GSAP .. the translateY equivalent is the y property


so you could also do this:

TweenLite.set(ul, {y: '-200px'});

translateX = x

translateY = y

translateZ = z


when i see your ul tag i see the transform matrix on the ul tag:

transform: matrix(1, 0, 0, 1, 0, -200);
  • Like 2
Link to comment
Share on other sites

Just for clarity, you CAN use the full transform string as you initially had


TweenLite.set(ul, {css:{transform: 'translateY(-200px)'}}); //uses css {}


Also, using the css{} object wrapper is really only necessary when you need to maximize performance under stress (as it removes a small layer of parsing). In the case of a single set(), it is perfectly fine just to use:


TweenLite.set(ul, {transform: 'translateY(-200px)'}); // no css{} object wrapper


Also I want to point out that your set() code was originally fine. Although I'm not sure why, it seems that when you used jQuery append the ul to the body, the inline style settings got ripped out.


Check out this fiddle that uses your original code with the only change being that the append(ul) happens before you generate the list items and set the transform:


$(function() {
    var ul = $('<ul></ul>');
    //append the ul first
    for (var i = 0; i < 100; i++) {
        ul.append('<li>'+ i +'</li>');
    TweenLite.set(ul, {css:{transform: 'translateY(-200px)'}});



But, as Jonathan had pointed out, using x and y is much more convenient.

  • Like 1
Link to comment
Share on other sites

Simple solution (as you discovered): using "y" works great. 


Complicated explanation: as Carl pointed out, if you try setting the transform directly with a string like "translateY(-200px)" BEFORE the element is actually in the document somewhere, it doesn't work properly. That's because in order to correctly parse the real "translateY" value, it must apply your transform string to the element, and then have the browser return the resulting matrix() or matrix3d() and parse the data (because your transform could technically be super complex like "rotate(90deg) skewX(45deg) scale(0.5,0.4) translateY(30px) rotate(30deg) translateY(200px)" and they all have to get pressed together and calculated). The problem is that some browsers (like Chrome) don't correctly report the matrix() or matrix3d() if the element isn't attached to the document! In my opinion, that's clearly a browser bug. 


We could, of course, look all the way up the hierarchy and see if the element is attached to the body and if not, add it temporarily, then ask the browser to report the transform, then remove it from the body, but that's a lot of extra work and code that'd have to be performed on EVERY transform tween. We're HUGE performance freaks and we just hate paying that performance penalty for such an uncommon edge case. Instead, we'll just recommend that you specifically define the x/y/rotation/skew/scale instead of passing a "transform" string like you were doing, or you can just make sure that you add the element to the document before tweening/setting it. 

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