Jump to content
Search Community

Inconsistent tween speed/easing

velkas test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

  • 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.
  • Create New...