Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
superasn

Please give me feedback on this animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

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

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

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

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. 

  • Like 3
Link to comment
Share on other sites

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

  • Like 4
  • Thanks 1
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.
×