Jump to content
Search Community

Oooops ...

mikel 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,

 

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 comment
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 comment
Share on other sites

  • 3 weeks later...

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