curajuice Posted January 9, 2022 Share Posted January 9, 2022 Hi there, Is there anyone who can tell me why animating a property to 0 ,doesn't get to 0? I have a text 115% offscreen. I want to animate it to 0, so it can get to its intended position. Thanks! screenshot example code: tl.fromTo( el.current, { duration: 3, ease: "linear", x: "115%", }, { x: "0%", } ) Link to comment Share on other sites More sharing options...
Cassie Posted January 9, 2022 Share Posted January 9, 2022 Hey there! You don't need to wrap those values in a string - you can just use numbers. If you want to animate by a percentage of the elements width or height instead of by pixels you can use xPercent or yPercent instead Also - if you're just animating 'from' somewhere and want to end up at the position you've specified in your CSS, just use a from tween. e.g. gsap.from(elem,{ x: 100, // or xPercent: 100 }) Hope this helps and happy tweening! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 9, 2022 Share Posted January 9, 2022 Yes, and it's super difficult to diagnose the problem by just looking at a small snippet of code - we'd need to see a minimal demo to look for the culprit. My guess is you've got something else that's creating a conflict somewhere in your logic. So if you still need some help, please post a minimal demo like in CodePen or CodeSandbox and we'd be happy to take a peek. Also, you put the ease and duration in the wrong part of the fromTo(): // BAD tl.fromTo( el.current, { duration: 3, ease: "linear", x: "115%", }, { x: "0%", }); // GOOD tl.fromTo( el.current, { xPercent: 115, }, { xPercent: 0, duration: 3, ease: "linear" }); Happy tweening! 1 1 Link to comment Share on other sites More sharing options...
curajuice Posted January 10, 2022 Author Share Posted January 10, 2022 Hi there! Thanks for the replies. Solved! My animations work more predictable now! 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