POLL: BezierPlugin new features and types

[GreenSock]

Please check out the poll about the BezierPlugin and vote on whether or not "thruBasic" should remain an option:

http://forums.greensock.com/topic/6395-poll-bezierplugin-new-features-and-types/

 

(and of course feel free to chime in with any other input/suggestions/rants/raves about BezierPlugin there too)

[BarryS]

Hi,

 

First let me say how great I think the GSAP is! It is brilliant.

 

I've been looking forward to using the BezierPlugin and I'm just trying to get to grips with it now, but im struggling a little.

 

What i'd like to do is simply take an image of a vehicle (looking from above) and to make it animate around a corner. So that the vehicle goes up, around the corner, and then down again.

 

I can do the up and down part ok, and I'm using the timeline, but I cant seem to work out the bezier part. I'll also need to auto rotate the vehicle, but I'll move onto that next.

 

In your syntax example below, can you point out to me how the array works, as the image I'm trying to animate moves in a 'S' shape (as if the S is 90 degrees clockwise).

 

TweenMax.to(document.getElementById("myDiv"), 5, {css:{bezier:[{left:100, top:250}, {left:300, top:0}, {left:500, top:400}]}, ease:Power1.easeInOut});

 

I've saved this text, so if you'd like me to delete this comment and start another thread I can do so.

 

Kind regards,

 

Barry

[BarryS]

I've just realised that if I change the bezier type to 'soft' I can get the image to move the way I want it to. Here's my code.

 

tl.to(Vehicle1, 1, {css:{bezier:{type:"soft", values:[{x:50, y:-100}, {x:200, y:0}], autoRotate:true}}, ease:Power1.easeInOut});

 

Now I just need to work out how to rotate the image so that the vehicle looks like it is driving forward. I'd really appreciate it if you could help me with that.

 

Many thanks,

 

Barry

[GreenSock]

Is your car artwork oriented pointing up (assuming no rotation)? If so, just add 90 degrees (which is Math.PI / 2 radians) to the autoRotate. Currently, you're just setting autoRotate to true which uses the default rotation offset of 0. But you have very precise control over all the specifics that feed into the autoRotate calculation, you can pass in an array as described in the docs (http://api.greensock...zierPlugin.html). And it dawned on me today that the most common thing people would likely want to change about autoRotation would be the rotational offset, so instead of making you pass in an array of all the extras, the latest version of BezierPlugin/CSSPlugin allows you to simply pass a number and it'll interpret that as the rotational offset in degrees (using all the other defaults).

 

So, for example:

tl.to(Vehicle1, 1, {css:{bezier:{type:"soft", values:[{x:50, y:-100}, {x:200, y:0}], autoRotate:90}}, ease:Power1.easeInOut});

 

Notice I used autoRotate:90 to add 90 degrees to the rotation.

 

Again, you'll need to download the latest version to get that particular feature to work.

 

Does that help?

[BarryS]

You were correct in the assumption that the car artwork is oriented pointing up (assuming no rotation).

 

I've just downloaded the latest version and used your code snippet and it does exactly what I wanted it to do.

 

Thank you so much for you help.

[ericmm16]

I am trying to build a pretty simple car animation. With the car body and wheels.

It works great and I'm pretty impressed with the tool. However i have noticed that when I add wheels into my car div. Any thing that is not the car body, will not follow the curve of the bezier in IE8 and lower... http://jsfiddle.net/cuUsN/1/

 

Any ideas?

 

Gotta love IE!

 

thanks.

[ericmm16]

Looks like it is slightly related to position absolute that I have set on a few divs...

 

I am trying to build a pretty simple car animation. With the car body and wheels.

It works great and I'm pretty impressed with the tool. However i have noticed that when I add wheels into my car div. Any thing that is not the car body, will not follow the curve of the bezier in IE8 and lower... http://jsfiddle.net/cuUsN/1/

 

Any ideas?

 

Gotta love IE!

 

thanks.

[GreenSock]

Are you saying you resolved the issue? Did you still need help?

 

Yeah, old versions of IE have all sorts of problems and inconsistencies and unfortunately not all of them can be worked around. We've done a ton of work in CSSPlugin to help make things run as consistently as possible, but we can't work miracles. If IE doesn't apply filters (which are necessary for transforms in old versions of IE) to child elements correctly, I can't think of a feasible way to solve that.

[ericmm16]

No I didn't resolve the issue entirely, I figured out why it wasn't working. You are correct about the child elements not being applied correctly.

 

Im going to try some other ideas. I will post if I come up with a solution.

 

Thanks for the quick reply.