Jump to content


Inconsistent tween speed/easing

Moderator Tag
Go to solution Solved by Rodrigo,

Recommended Posts

In the linked code sample, the button transform is not smoothly animated and appears to speed up instead of maintaining a constant velocity. Am I missing a CSS prop or a default override? 

See the Pen zYjgxPx by connorhansen (@connorhansen) on CodePen

Link to comment
Share on other sites

  • Solution



You are mixing CSS transitions and GSAP. You are using a fromTo GSAP instance with transition all in the CSS, so when GSAP moves the button the CSS transition kicks in. On top of that you have a transition all in the CSS that means that any style that changes will be animated by CSS:

.button-primary-2 {
    padding: 32px 64px;
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
    background-color: #fff;
    -webkit-transition: all 200ms ease; // This
    transition: all 200ms ease; // This
    font-family: Inter, sans-serif;
    color: #000;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;

Just remove the transition lines and this code seems to work the way you want:

// Hero button animation
gsap.fromTo(".home-hero-button", {
	yPercent: 100,
  autoAlpha: 0,
}, {
  delay: 1,
	ease: "none",
  duration: 0.6,
	yPercent: 0,
  autoAlpha: 1,

Let us know if you have more questions.


Happy Tweening!

  • Like 3
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.