Jump to content
Search Community

gsap.to works perfectly but not gsap.from

Seiwa
Moderator Tag

Recommended Posts

Posted
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;
}
Posted

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

  • Like 1
Posted

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!

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