Share Posted June 4, 2019 I'm new to GSAP but based on the video tutorials I'm trying to create an simple text effect Basically I'm trying to reveal the text like it's being drawn by an airplane (see my codepen) It's working but I don't think it's looking very smooth. Maybe I should not animate the plane and just position it using the "movePlane" function? Your feedback is appreciated. P.S. Sorry about the ugly code (I'm very new to this) ? See the Pen vwPQQB by superasn (@superasn) on CodePen Link to comment Share on other sites More sharing options...
Author Share Posted June 4, 2019 This is using the onUpdate method. I think it looks better than the first! See the Pen EzMGLq by superasn (@superasn) on CodePen Link to comment Share on other sites More sharing options...
Share Posted June 4, 2019 Hi @superasn, The reason for the stutter in the plane movement is that it's jumping a set number of pixels rather than tweening a set distance over a set time. Have a look here to see one way to tackle this and to allow everything to smoothly get into position. See the Pen YbggBm?editors=0110 by sgorneau (@sgorneau) on CodePen 4 1 Link to comment Share on other sites More sharing options...
Share Posted June 4, 2019 Maybe it would look nice if the letters were to resize from a smaller size to the end size. Also using e.g. three planes which fly staggered could be some idea. So the animation doesn't take that long to finish and you get some more action Just my two cents. 2 Link to comment Share on other sites More sharing options...
Author Share Posted June 4, 2019 21 minutes ago, leolo69 said: Maybe it would look nice if the letters were to resize from a smaller size to the end size. Also using e.g. three planes which fly staggered could be some idea. So the animation doesn't take that long to finish and you get some more action Just my two cents. Thanks, that's very good feedback! I will try this? ...also tried to use an animated gif with smoke which is also looking good Link to comment Share on other sites More sharing options...
Author Share Posted June 4, 2019 36 minutes ago, Shaun Gorneau said: Hi @superasn, The reason for the stutter in the plane movement is that it's jumping a set number of pixels rather than tweening a set distance over a set time. Have a look here to see one way to tackle this and to allow everything to smoothly get into position. Wow that's amazing.. it looks much smoother now, especially the text fade underneath! thanks for the help! Link to comment Share on other sites More sharing options...
Share Posted June 4, 2019 Happy to help. Often less is more and i always have to remind myself, that at the end the message is what's important. So it has to be visible very quick. Animation should put emphasis on the message you want to deliver and never distract from it. 3 Link to comment Share on other sites More sharing options...
Share Posted June 4, 2019 8 hours ago, leolo69 said: So it has to be visible very quick. Animation should put emphasis on the message you want to deliver and never distract from it. I would agree, maybe consider using the plane effect only once and make it a bit quicker. See the Pen oROYow by Visual-Q (@Visual-Q) on CodePen 4 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