Jump to content
Search Community

0 is not quite 0

curajuice test
Moderator Tag

Recommended Posts

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 

image.png.483626da005c55b8a4bc3ed1fa665047.png

 

example code:

    tl.fromToel.current, {
      duration: 3,
      ease: "linear",
      x: "115%",
    },
    {
      x: "0%",
    }
    )
Link to comment
Share on other sites

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!

  • Thanks 1
Link to comment
Share on other sites

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!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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