Autorotate doesnt work

[whappit]

I'm trying to implement the bezier curve like here: on http://109.235.76.141/projects/manoverboord/ .

 

I want the fish to swim some routes and then return, and create a happy fishbowl. Thing is, for me the autorotate doesnt work. Do I need to explicitly include the plugin for beziers?

 

Greetings

See the Pen Krfod by GreenSock (@GreenSock) on CodePen

[Jonathan]

Hello, and Welcome to the GreenSock forum!

 

Thank you for the example, very helpful !!

 

TweenMax includes the BezierPlugin. If you are using TweenLite then you will need to include it separately.
 

It looks like autoRotate is working since it is autoRotating its position to align with the direction of the path it is on. You can see it as it curves around and it faces the direction of the rotation when turning.

 

When i comment out autoRotate the ghost just stays facing one position and doesnt rotate, see here:

 

See the Pen Lkvzow by jonathan (@jonathan) on CodePen

 

Do you see what i mean?

 

Taken from the BezierPlugin Docs:

 

http://greensock.com/docs/#/HTML5/Plugins/BezierPlugin/

 

• 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 setautoRotate: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:

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

Let us know if you have anymore questions?

 

[whappit]

Hey there, and thanks for welcoming me!

 

In the codepen it works fine, but in my implementation it doesnt: http://109.235.76.141/projects/manoverboord/ . I use TweenMax. The direction works, but the rotation never happens.

 

This is my javascript:

jQuery(document).ready(function ($) {
    var fish1 = document.getElementById("fish-1");
    TweenMax.to(fish1, 14, {repeat:-1, yoyo:true, bezier:{type:"cubic", values:[{left:0, y:0}, {left:"33%", y:-300}, {left:"66%", y:300}, {left:"100%", y:0}], autoRotate:["x","y","rotation", 0, true]}, ease:Expo.easeInOut});
});

And this my css:

.fish-1{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 400px;
}

And my html

<div id="fishzone">
            <div id="fish-1" class="fish-1"></div>
        </div>

Appears to be the same, but it just never rotates.

Greetings,

[Jonathan]

I believe the difference in the two codepen's is your animating left and the other is animating x (translateX). x will always animate better thnan animating position offsets like top and left. Whereas x and y will always animate smoother and can take advantage of animating smoother. And you are using percentages of left where that example is using whole numbers. You can see here in this example

 

This will be hard to test and change values and properties on your website..

 

But try changing left to x in bezier tween

 

If your still having issues please make a limited codepen just your tween and your square red fish so this way we can test your code live to better help you.

 

 

Thank You!

 

[Carl]

Yeah, its important that the demo illustrates what isn't working. 

 

I think the issue is that you are using percentage-based values. If you use left and top with px it works fine:

http://codepen.io/anon/pen/mEgqGB?editors=0010

 

I'm pretty sure it isn't possible for autoRotate to be accurate with percentages as the plugin would need to know the width and height of the parent to figure out how many degrees to rotate. A position of top:20%, left:80% could be in drastically different place on your screen depending on the size and aspect ratio of the element's parent container.

 

Check out this fork of Blake's demo for responsive beziers (i added autoRotate:true)

http://codepen.io/GreenSock/pen/OXGOdk

Note it recalculates coordinates on resize