Jump to content
Search Community

TextPlugin typing bottom up animation

Maniak Development test
Moderator Tag

Recommended Posts

Hey guys, I have a problem and I can't find a solution on the TextPlugin documentation.

 

I have this section that is going to have text (the text is coming from a WYSIWYG so it's going to have a lot of HTML tags) and I need to create like a typewriting effect, the text is going to start from the bottom and is going to go up. I added a video so you can see the effect I'm looking for, the problem is that on the video it doesn't show that, but I need to animate individual characters.

 

I was testing the plugin but I don't see a lot of properties that I can use to create this effect, so is it possible to do it with this plugin? Or should I be using something else?

 

I added two examples on the codepen, on one I get the animation but only for the lines, no the characters. And on the second example I only get the last line animated, can't make to other text to appear

 

 

See the Pen bGWNVbY?editors=1010 by godhandkiller (@godhandkiller) on CodePen

Link to comment
Share on other sites

11 hours ago, Trapti said:

Hey, 

 

I tried doing it with split text. One timeline is for animating the texts, and other for taking the container up. Adjust the time and distance according to your actual text. Hope this helps. 

 

 

 

Thank you for the answer, I have a question, I notice you're using 'staggerFrom' but isn't that an old function? I have use that with gsap3

 

Also is there a way to move the text up when the line finish writing the text?

Link to comment
Share on other sites

7 minutes ago, hmontelongo said:

I notice you're using 'staggerFrom' but isn't that an old function?

 

It will still work for backwards compatibility with older versions of GSAP, but you should use the new syntax.

 

tl.from(chars, {
  stagger: 0.08,
  ...
})

 

  • Like 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.
×
×
  • Create New...