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

Share this post


Link to post
Share on other sites

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

 

;)

 

  • Like 1
  • Haha 3

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×