Maniak Development Posted June 29, 2021 Posted June 29, 2021 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 Screen Recording 2021-06-29 at 18.22.21.mov See the Pen bGWNVbY?editors=1010 by godhandkiller (@godhandkiller) on CodePen.
Trapti Posted June 30, 2021 Posted June 30, 2021 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. See the Pen YzVPpjP by tripti1410 (@tripti1410) on CodePen. 5
Maniak Development Posted June 30, 2021 Author Posted June 30, 2021 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?
OSUblake Posted June 30, 2021 Posted June 30, 2021 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, ... }) 1
Maniak Development Posted June 30, 2021 Author Posted June 30, 2021 @Trapti I was able to update my codepen See the Pen bGWNVbY by godhandkiller (@godhandkiller) on CodePen. So whenever the line finish I try to move the master timeline up, but it only moves once, any Idea how can I make it so it keeps moving up? @OSUblake thank you! i read the documentation and I was able to change it to 'from'
mikel Posted June 30, 2021 Posted June 30, 2021 Hey @hmontelongo, Take a look at Advanced Stagger: 'The same thing is true for callbacks (e.g. onUpdate, onComplete, onStart) - including them inside of the stagger objects makes them fire per element.' Happy tweening ... Mikel
Maniak Development Posted June 30, 2021 Author Posted June 30, 2021 I was able to achieve my desired behavior, this is the updated codepen See the Pen bGWNVbY?editors=1010 by godhandkiller (@godhandkiller) on CodePen. 1
Maniak Development Posted July 1, 2021 Author Posted July 1, 2021 @mikel It's there a way to skip text on the SplitText plugin? On this example I have 2 buttons on a paragraph but SplitText is animating the text inside the buttons, is there a way to not do that only on the buttons text? See the Pen bGWNVbY by godhandkiller (@godhandkiller) on CodePen.
Trapti Posted July 1, 2021 Posted July 1, 2021 Before splitting filter out the content which you don't want using JS.
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