Seiwa Posted January 9 Posted January 9 useGSAP(() => { gsap.from(".box", { x: -100, stagger: 2 }); }); Above doesn't work but below works useGSAP(() => { gsap.to(".box", { x: -100, stagger: 2 }); }); // What am I missing here? CSS .box { background-color:green; height:100px; width:100px; }
Cassie Posted January 9 Posted January 9 Hi there - There's nothing wrong with your code. Can you replicate this in a demo? See the Pen GgKQxXy?editors=0010 by GreenSock (@GreenSock) on CodePen.
Seiwa Posted January 10 Author Posted January 10 Okay finally found the issue after hours of debugging and going through forum. I had a transition in my h1 and that has a conflict with .from but works okay with .to I read you shouldn't transition something you are already animating. Which yeah makes sense. I added transition before adding GSAP so I wasn't able to catch it. Kudus to the forum. Members and support is active. Thanks 1
Cassie Posted January 10 Posted January 10 100% - CSS transitions on elements you're animating is a big no-no. To may have worked, but if you look closely you'll see that the easing and duration will be off too. GSAP and CSS basically fight for control of the element. Glad you figure it out!
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