Timeline.set() Failing to set some CSS properties

[Pedr]

Hello,

 

Been greatly enjoying having TweenLite back in my life since switching to JS a while ago, however I'm hitting a small issue ...

 

I am finding that timeline.set() is not working for all CSS properties:

 

This works fine:

 

$panel.css({left: startingLeft, opacity: 0, visibility: 'hidden'}).addClass('selected');

 

The element's left has been set to the value of startingLeft and it is hidden.

 

However doing the same thing in the same place with Timeline.set() fails to set any properties, but does set the element's class to 'selected':

 

timeline.set($panel[0], { css:{ left: startingLeft, autoAlpha: 0, className:"+=selected"}});

 

The element's left is unchanged and the element is visible.

 

If I use timeline.to() with the same CSS values and a zero duration, it also fails. Am I doing something wrong?

[GreenSock]

Ah yes, that happens when you've got a zero-duration tween (which is what a set() is) that you're applying a className to AND changing other properties.

 

The good news is that we've been working on a huge rewrite and enhancement of the CSSPlugin that not only resolves that issue, but also adds the ability to tween some exciting things like 3D transforms (rotationX, rotationY, rotationZ, z, perspective, transformPerspective, etc.) as well as borderRadius, boxShadow, textShadow, and clip. I have attached the revised [prerelease] files - would you mind giving them a shot in your project and letting us know if things work well for you? We'll be posting more information about all the exciting stuff in the upcoming release and update the docs, provide some examples, etc. but for now I wanted to get you the .js files so that you could kick the tires. I mention all the new additions so that you understand what's now possible and why the file size got boosted a bit.

 

And for the record, there are no known bugs in these [attached] files, so you don't need to feel like you're working on partial builds or stuff that we know is faulty in some way. Hopefully you'll find them rock-solid and even more capable than ever before, although we still have some more testing to do.

 

If you'd rather keep using the older version, one simple solution is to change your set() to a to() and use a super small duration, like 0.001 OR separate things so that your className is in one set() and all the other property changes are in another set(). But again, that shouldn't be necessary in the updated version.

update_2012-11-06.zip

[Pedr]

Works like a dream. Thanks a lot. Will be using these a lot over the next few days so I'll let you know if the wheels fall off

[Boro]

I've tried to use this "unofficial" new version of TimelineMax to experiment with CSS 3D properties, but without any success. I've tried many combinations.

Here is sample of my code:

 

TweenMax.to(r, 4, {css:{rotateX:"90deg", left:"100px"}});

 

What can I do to use transforms?

Could You post some simple code sample?

 

CSS 3D transforms + GS JS would be extremely useful in my current project. I know that You might want to wait for official release, but please, let us experiment already!

[Carl]

Hi Boro,

 

You want to use:

 

rotationX:360 or rotationX:"360deg"

 

try this

 

CSSPlugin.defaultTransformPerspective = 600; //without a transformPerspective set the animation will look very flat
TweenLite.to(r, 4, {css:{rotationX:360, left:"100px"}});

 

Stay tuned. Sample files may be coming very soon.

 

-c