Object jumping from original position to .from, can't seem to fix it!

[cooganb]

hi there!

 

I know this is a newbie question, but I'm totally stuck. I'm working on a basic animation and I can't get the object I'm animating to start at the .from location, rather it jumps there and then starts the animation. I tried using labels to make them start at the same time, but it's still jumping. Any ideas?

 

Thank you so much in advance! 

See the Pen xxqgdpY by cooganb (@cooganb) on CodePen

[OSUblake]

Sorry, which part is the problem? You have a lot of elements in there, and I don't know what I'm looking at.

 

Have you tried just setting it first. And then do a .to() animation in your timeline?

 

gsap.set(...)

gsap.timeline()
  .to()

 

[cooganb]

@OSUblake Apologies for the busy code, so the line in question is line 35 in the JS, in the `hide()` function: 

 

  .from(fin, {duration: 1, transformOrigin: "100% 90%", x: '+=300px', y: '-=5px', rotation: -130},'start')

I was hoping that by giving it a label it would start with the line above, but when the animation starts, the fin is at its original position then switches over to the .from position.

 

I just tried running set, but it still had the fin in the original position before going to the set position.

 

If you think it's a matter of having a cleaner timeline, I'm happy to try that.

[OSUblake]

I think it's just like some FOUC. If you initially make your SVG hidden, then you won't see it. See how I make it visible immediately after the timeline has been created.

 

hide()
blink()

gsap.set("svg", { opacity: 1 })

 

See the Pen 2e215e55f1647bcf4fc6fb6c9a9a4c27 by osublake (@osublake) on CodePen

[cooganb]

Beautiful! Thank you, sir. Works like a charm 🙇‍♂️