Share Posted October 21, 2022 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 More sharing options...
Solution Solution Share Posted October 21, 2022 Hi, 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! 3 Link to comment Share on other sites More sharing options...
Author Share Posted October 21, 2022 Perfect, thank you! 1 Link to comment Share on other sites More sharing options...
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