Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mikel

Oooops ...

Recommended Posts

Hi,

 

To be honest, I just wanted to try different easings and a countdown.
But with a little story it was really funny ...

 

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

 

Kind regards

Mikel

 

By the way: GSDevTools is very helpful. I noticed, however, that in reverse, the centering of the object (pathDataToBezier) is not interpreted expected. Is that due to my coding?

 

  • Like 2
  • Haha 2
Link to post
Share on other sites

Why does it reminds me of somebody here with a moustache?

 

;)

 

  • Like 1
  • Haha 3
Link to post
Share on other sites

Thanks for sharing, Mikel. Its demos like this that make me the happiest; to see people having fun and learning some stuff.

  • Like 2
  • Thanks 1
Link to post
Share on other sites

Hi @Carl,

 

Please answer me the question about GSDevTools  ...

 

By the way: GSDevTools is very helpful. I noticed, however, that in reverse, the centering of the object (pathDataToBezier) is not interpreted expected. Is that due to my coding?

 

Here the reduced egg:

 

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

 

Thanks ...

Mikel

Link to post
Share on other sites

Thanks for the reduced version Mikel. I think the issue has to do with how you are changing the transformOrigin while a bezier tween is running or some sort of overwrite. I will look into this more this evening for sure.

  • Like 1
Link to post
Share on other sites

Alright, I think I figured out the issue. It has to do with the fact that you were doing a cubic bezier animation which made it jump to entirely new coordinates right at the start of that tween, but in reverse it doesn't RETURN it to the original (pre-bezier) values. So imagine x/y start at 0,0 and then you do a bezier tween that makes them jump to 100,100 at the start of the tween and animate to new values from there. In reverse, that tween would end up with x/y at 100,100, not at 0,0. 

 

You could add a set() just before that and use a relative value for x and y of "+=0" and also apply the transformOrigin there as well so that it's all recorded in a keyframe on the timeline. That way, in reverse, it'll jump back there. Here's the revised code for your isolated version: 

var action = new TimelineMax()
  .set($biddy,{autoAlpha:0})
  .from($bustOpen, 2, {drawSVG:"0%",ease: easeStepped07},1)
  .to($eggAbove,2,{y:-10, rotation:10, transformOrigin:"right bottom",ease: RoughEase.ease.config({ template:  Power0.easeNone, strength: 1, points: 20, taper: "none", randomize: true, clamp: false})})
  .set($eggAbove, {xPercent:-50, yPercent:-50})

  // --> THIS LINE IS NEW <-- it records the x/y position and the transformOrigin before the motion path bezier. //
  .set($eggAbove, {x:"+=0", y:"+=0", transformOrigin:"center center"})

  .to($eggAbove, 2, {bezier: { values: motionPath, type: "cubic"},ease: Linear.easeNone})
  .to($eggAbove,2, {scale:0, transformOrigin: 'center center'}, "-=2")
  .to($eggAbove,2, {rotation: 180, transformOrigin: 'center center'}, "-=2")

 

Sorry about any confusion there. 

  • Like 5
Link to post
Share on other sites

Hi @GreenSock,


Thanks a lot.
My learning: to 'record' the x / y position and the transformOrigin in every case using pathDataToBezier.

 

Kind regards

Mikel

Link to post
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.

×