cooganb Posted May 20, 2021 Share Posted May 20, 2021 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 Link to comment Share on other sites More sharing options...
OSUblake Posted May 20, 2021 Share Posted May 20, 2021 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() Link to comment Share on other sites More sharing options...
cooganb Posted May 21, 2021 Author Share Posted May 21, 2021 @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. Link to comment Share on other sites More sharing options...
OSUblake Posted May 21, 2021 Share Posted May 21, 2021 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 2 Link to comment Share on other sites More sharing options...
cooganb Posted May 21, 2021 Author Share Posted May 21, 2021 Beautiful! Thank you, sir. Works like a charm 🙇♂️ 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now