Jump to content
GreenSock

WilliamBay

Custom Rotation on elements in a Path

Recommended Posts

I'm interested in figuring out how to add custom rotations on the tweens between points on my paths.

In the Codepen example, I have two birds animated, and would like to give have them turn slightly in the direction they are flying.

It doesn't look like the autoRotate parameter does that, as they will shift the rotation angle at path apex, and direction shift.

 

Would love some direction, or an example, or something to read.

 

Thanks!

See the Pen Evwgyv by bahia0019 (@bahia0019) on CodePen

Link to comment
Share on other sites

It looks like autoRotate wasn't working in your example because it was nested incorrectly (outside the bezier:{} object instead of inside of it). When I fixed that, though, it didn't look exactly natural to have it spinning around like that (even though autoRotate was doing exactly what it was supposed to do). If you want subtle movement on the rotation, it might be best to just animate that separately. 

 

In fact, a random CustomWiggle might be of use here: 

See the Pen 9104a30b708bc7f5e4127c7c5e359b6c by GreenSock (@GreenSock) on CodePen

 

  CustomWiggle.create("randomWiggle", {type:"random", wiggles:4});
  TweenMax.to(birdTwo, 4, {rotation:50, ease:"randomWiggle"});

 

For more info about CustomWiggle (a Club GreenSock membership benefit for "Shockingly Green" and higher), see https://greensock.com/wiggle-bounce

  • Like 4
Link to comment
Share on other sites

Hi ,

 

I love the sounds of the sea, the seagulls and their screaming:

 

See the Pen JyOPEw by mikeK (@mikeK) on CodePen

 

Question: Can I combine morphSVG  with cycle?

 

  .staggerTo(birds,0.8, {
    cycle:{morphSVG:["#bird1fly","#bird2fly","#bird3fly",]},
    repeat:-1, yoyo:true, ease: Sine.easeOut},0.3)

 

Kind regards

Mikel

  • Like 3
Link to comment
Share on other sites

Sure, you can combine cycle with morphSVG. You just had an extra "," in your array, and your "birds" was only one element, not an array (the stagger methods expect an array or array-like target). Use querySelectorAll() instead of querySelector() for ".birds" and you should get the result you wanted. Does that help? 

  • Like 1
Link to comment
Share on other sites

On 8/14/2017 at 10:00 PM, GreenSock said:

 


  CustomWiggle.create("randomWiggle", {type:"random", wiggles:4});
  TweenMax.to(birdTwo, 4, {rotation:50, ease:"randomWiggle"});

 

For more info about CustomWiggle (a Club GreenSock membership benefit for "Shockingly Green" and higher), see https://greensock.com/wiggle-bounce

 

 

The Wiggle looks good, but I'm looking for a little finer control. So as birdTwo moves in the first section of his path (towards the right), I'd like a slight rotation to the right. And then as it cuts back towards the left, to rotate back to 0 and then slightly more, then as it falls to level out, and then a slight rotation to the right as it returns back to it's original location, and levels out again.

Can these rotation points be "attached" on to the bezier path in some way? 

Link to comment
Share on other sites

There isn't an easy way to have that level of fine-tuned control. Technically a CustomEase would allow you to create a separate rotation tween with its own ease. I created this crude demo below in more time than I'd like to admit:

 

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

 

Its far from perfect but you should be able to see the "guy" speeds up as he falls down the hill and leans back. It required a substantial amount of back and forth between the Ease Visualizer and the demo. The ease I'm using for the rotation looks like https://greensock.com/ease-visualizer?CustomEase="M0,0 C0,0 0.114,-0.044 0.204,-0.044 0.334,-0.044 0.324,0.78 0.448,0.78 0.586,0.78 0.655,0.139 0.708,0.068 0.846,-0.118 1,0 1,0"

 

It relies on MorphSVG.pathDataToBezier() (Shockingly+) to have the guy follow the path.

 

 

So that's how it could be done by hand. Then there is the programatic approach...

 

What you want to is entirely possible if you live in the Matrix like @OSUblake Check his demo where he adjusts the speed of an object based on the steepness/direction of the curve it is following. It doesn't seem like much of a leap to have the rotation of an object adjust based on similar factors. Definitely not something I could whip together though.

 

See the Pen XXbLer?editors=1010 by osublake (@osublake) on CodePen

 

  • Like 5
Link to comment
Share on other sites

That's pretty good @Carl

 

You could also play around with adding the rotation to your Bezier values. Beziers aren't limited to x and y values. ;)

 

TweenMax.to(element, 2, {
  bezier: {
    values: [
      { x: 100, y: 10, rotation: 0 },
      { x: 200, y: 20, rotation: -30 },
      { x: 200, y: 30, rotation: 30 },
      ...
    ]
  }
});

 

  • Like 4
Link to comment
Share on other sites

Ha. Thanks, Blake. That's definitely a quicker way to get things done! I never think of BezierPlugin for things other than position.  Doh!

  • Like 1
Link to comment
Share on other sites

On 8/16/2017 at 1:04 PM, OSUblake said:

That's pretty good @Carl

 

You could also play around with adding the rotation to your Bezier values. Beziers aren't limited to x and y values. ;)

 


TweenMax.to(element, 2, {
  bezier: {
    values: [
      { x: 100, y: 10, rotation: 0 },
      { x: 200, y: 20, rotation: -30 },
      { x: 200, y: 30, rotation: 30 },
      ...
    ]
  }
});

 

 

 

 

@OSUblake Can you fork this and show me this in action? When I do it, the animation doesn't respond to the rotation parameter.

 

Link to comment
Share on other sites

Hi @WilliamBay:)

 

Seems o.k. to me. I added some 30 degree rotation on the first bird and 90 on the 2nd so it really shows. Of course you'll need to adjust and fine tune that to your liking. Unless you like a crazy bird turning 90 degrees. :D

 

See the Pen mMXKma by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

@PointC What I just discovered is that the Rotation parameter needs to be added in ALL tweens, or it will not work.

When I tried last night, I only added it to the first two tweens to test it.

 

OK. Now we're in business!!!
 

Thanks for the crowdsourcing on this one everybody. 

  • Like 1
Link to comment
Share on other sites

Glad you got it all figured out. The final result looks good - thanks for sharing. 

 

Happy tweening.

:)

  • 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.
×