Jump to content
Search Community

BezierPlugin - autoRotate right directions

Thiago Coelho 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

Hi folks,

 

I'm having trouble with BezierPlugin, i've done a motion where i caught a bunch of blocks and tween all of then through different paths.

 

When i'm tweening from left to right, everything works fine, but when i try to tween those blocks from right to left the autoRotate doesn't work.

 

I'm not posting yet any example code just to see if anyone already had this problem and knows how to solve it.

 

Anyway i will do a sample in codepen asap.

 

That was fast, i've remembered a example that i saw at codepen and i've used it to reproduce the problem.

 

Check it out,

 


 

Thank you.
Link to comment
Share on other sites

Yep, like Jack said you could try using negative x values instead of right.
 
Another possibility would be to use the autoRotate configuration. Quote from the Bezier plugin docs:

autoRotate : Boolean, Number, or Array (default:false) - to automatically rotate the target according to its position on the Bezier path, you can use the autoRotate feature. If your Bezier is affecting the "x" and "y" (or "left" and "top") properties of your target and you don't need to offset the rotation by a certain amount more than normal, then you can simply set autoRotate:true. Or if you want to offset the rotation by a certain amount (in degrees), you can define a number like autoRotate:90 (adding 90 degrees in this example). Or for more advanced controls, you can define autoRotate as an array. In order to adjust a rotation property accurately, the plugin needs 5 pieces of information:The autoRotate property should be an Array containing these values, like ["x","y","rotation",90*Math.PI/180,true]. And if you need to affect multiple rotational properties (like in 3D tweens where the Bezier is going through x,y,z points which could affect rotationX, rotationY, and rotationZ), you can use an array of arrays, like [["x","y","rotationZ",0,false], ["z","x","rotationY",0,false], ["z","y","rotationX",0,false]].

  • Position property 1 (typically "x" or "left")
  • Position property 2 (typically "y" or "top")
  • Rotational property (typically "rotation")
  • Number of degrees (or radians) to add to the new rotation (optional - makes it easy to orient your target properly)
  • Boolean value indicating whether or not the rotational property should be defined in radians rather than degrees (default is false which results in degrees)

 

So instead of x you could use right and you'll have to play a bit with the angle value in order to get it to what you need.
 
Best,
Rodrigo.

Link to comment
Share on other sites

Well, unfortunately swapping "right" in for "left" or "x" won't really work because the values work in pretty much the opposite way. Normal coordinate systems are measured top down, left-to-right so as x (or left) increases, things are going to the right. However, the css "right" property is opposite - as it increases, the object moves more to the left. The Math.atan2() formula used to determine angles is based on normal screen coordinate systems, thus you can't just swap "right" in there and expect it to work properly. If you absolutely must use "right" (and frankly I wouldn't recommend it), you'll need to do the rotation calculations yourself in an onUpdate. 

  • Like 2
Link to comment
Share on other sites

First at all, thanks for all the answers :)

 

Well that's make sense, reading the docs again i understand that i can't use right expecting the same results, like Jack said.

 

Using x/y properties and negative values for x the autoRotation works fine but in a opposite way i think that is because of the negative x.

 

Maybe the solution is use a custom autoRotate or apply a rotation in an onUpdate.

 

See the Pen zyxlb by thiagocoelho (@thiagocoelho) on CodePen

Link to comment
Share on other sites

In that codepen, you could try using this as the autoRotate:["x","y","rotation",Math.PI,true]

 

That basically tells it to rotate 180 degrees (which is Math.PI in radians) and use radians for the rotational values. 

 

Beware, however, that we're about to release 1.11.0 of the platform which changes from using radians for rotation to using degrees, so the last 2 values in the array would change from Math.PI,true to 180,false once you update. This is one of the VERY uncommon scenarios that is affected by the change. The whole radians-vs-degrees thing was just an "under the hood" thing - when you define rotation values for regular stuff, degrees has always been the default. We're only changing how that gets stored on the hidden (and undocumented) _gsTransform object that's added to the element. But BezierPlugin taps into that, so when you're defining a custom autoRotate it matters. 

  • Like 1
Link to comment
Share on other sites

Hey Thiago,

 

Another option could be use a good old fashion bezier tween that goes from left to right and you can reverse that tween using reverse(0), that basically reverses the tween/timeilne playhead starting from the very end, that and having the ease as Linear.easeNone will give the perception that the animation can be played forward and backwards without any difference. This could result less complicated than tinkering with the autoRotate configuration.

var tn = new TweenMax.to(element, time, 
{
    bezier:
    {
        type:'soft',
        values:[/*normal x and y values array*/],
        autoRotate:true
    },
    ease:Linear.easeNone
});

tn.reverse(0);

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Jack thank you very much, your solution works like a charm.

 

I'm almost 100% happy with the results except by the fact that i need to dive into trigonometry again to fix it in my mind  ^_^

 

Rodrigo, that could be an option, but for the motion that i've planned the ease is fundamental. As soon as i can, i will post the final result here. Ins't 100% dynamic how i would like to, but i think the final result was cool.

 

In the first time i was using TimelineMax to control all of this (in/out), i give up cause i don't find a way to change the ease of those objects after i've created them. After a little research i saw that could not be a good ideia change the ease after it's created.

 

More infos (http://forums.greensock.com/topic/7810-change-easing-on-timeline-tweens-without-remaking-the-timeline/)

 

In the meanwhile i realize that this motion would be more cool if the objects enter from one point of the screen and get out by another one  :D

 

JFY you guys rock!

Link to comment
Share on other sites

As far as easing goes, here's a simple option: just use a Linear.easeNone for everything, and then tween the tween! Yes, you can actually tween the virtual playhead of a tween or timeline, and then you can apply whatever ease you want to that. For example:

var tween = TweenLite.to(element, 2, {bezier:{...}, ease:Linear.easeNone, paused:true});
//then later...
tween.time( tween.duration() ); //jump to the end
TweenLite.to(tween, 2, {time:0, ease:Power3.easeInOut}); //tween the "time" using whatever ease you want.

Cool, huh? 

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