Just_Jack Posted March 2, 2021 Share Posted March 2, 2021 Hello! Is there an easy way to make the width of a span expand to like 500px and then collapse to 0, within a few seconds? Here is what I have so far: gsap.to('.block', {duration: 1, width: 500}, 0.2); I know when using keyframes it would be something like this: @-webkit-keyframes block { 0% { width: 0px } 100% { width: 500px } } Thank you! See the Pen Yzpvzrw by just_ja (@just_ja) on CodePen Link to comment Share on other sites More sharing options...
Solution PointC Posted March 2, 2021 Solution Share Posted March 2, 2021 So you just want it to expand and then contract a few seconds later? Please try this. gsap.to(".block", { duration: 1, width: 500, yoyo: true, repeat: 1, repeatDelay: 3 }); Is that what you meant? Happy tweening. 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 3, 2021 Share Posted March 3, 2021 Also keep in mind that width is not a performant property to animate. So if you can use scaleX or another way using performant properties (like overflow: hidden on a container and then animating the child's x property) it'd perform better. 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