velkas Posted October 21, 2022 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 Rodrigo Posted October 21, 2022 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...
velkas Posted October 21, 2022 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