Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Faizan Ahmed

Change text on repeat of Typewriter text animation

Recommended Posts

Hey there! 
Can anyone help me with this?
I am new to this thing, really trying hard to get my hands dirty with tweenMax.

PROBLEM: I am trying to animate text in words by using SplitText, The thing i am trying to do is to change text on repeat. but can't do so.

https://fastfoodsignage.herokuapp.com/ go to the second section, There is an animation, I am trying to give it YoYo effect, so it can look like a typewriter, and on repeat want to change innerHTML and update the splitText

Codepen link: 

See the Pen qBWgZGg by ifaizanahmed (@ifaizanahmed) on CodePen

Link to post
Share on other sites

Hi and welcome to the forums.

 

I'm not quite sure I follow what you're trying to do, but your pen is loading the text plugin — not SplitText. Check out this demo for CodePen safe versions of the Club plugins.

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

SplitText breaks the text into divs so I'd recommend creating separate SplitText elements for each phrase and animating them rather than trying to change the innerHTML between tweens.

 

Hopefully that helps a bit. Happy tweening.

:)

   

  • Like 1
Link to post
Share on other sites

Hey Faizan, welcome to the GreenSock forums. 

 

In addition to the solid advice of Craig, there are several things I'd recommend you change:

  • Remove the CSS transition on the divs. You should try to keep all animation within GSAP so there's no conflict between animations. I would probably also animate the red rectangle that way instead of using a class name change, but that's up to you.
  • You don't need to do things like var textArr = $('h1.typist'). You can just pass in "h1.typist" as your target in GSAP and GSAP will find the element for you. 
  • Secondarily, if you are using variables, you don't also need to pass them as parameters in your updateText function. That function already has access to those variables through scoping, so don't make the code more muddled by passing around the same variables to the function (especially with the same name).
  • You should probably use your updateText function to set the initial state of the animation (unless you do as Craig suggests and use separate SplitText elements for each phrase and animate them instead - the way that Craig suggests is preferable 99% of the time). 
  • Since arrays are 0 indexed, you need to use if (counter === textArr.length - 1) { <— notice the - 1.
  • Class name tweens are not recommended. It seems like you were just using it to toggle a class, so I changed them to .set()s instead.
  • You should use autoAlpha to fade in from visibility: "hidden"
  • ScrollMagic is unrelated to this part of your project, so next time when creating a demo to show your issue I would probably remove it :) 

See the Pen bGbzqQJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

I hope that helps. Feel free to ask questions! 

 

Happy tweening.

  • Like 3
Link to post
Share on other sites
12 hours ago, PointC said:

Hi and welcome to the forums.

 

I'm not quite sure I follow what you're trying to do, but your pen is loading the text plugin — not SplitText. Check out this demo for CodePen safe versions of the Club plugins.

 

 

 

SplitText breaks the text into divs so I'd recommend creating separate SplitText elements for each phrase and animating them rather than trying to change the innerHTML between tweens.

 

Hopefully that helps a bit. Happy tweening.

:)

   

Thank you so much for helping me out, 

 

12 hours ago, PointC said:

Hi and welcome to the forums.

 

I'm not quite sure I follow what you're trying to do, but your pen is loading the text plugin — not SplitText. Check out this demo for CodePen safe versions of the Club plugins.

 

 

 

SplitText breaks the text into divs so I'd recommend creating separate SplitText elements for each phrase and animating them rather than trying to change the innerHTML between tweens.

 

Hopefully that helps a bit. Happy tweening.

:)

   

Thank you so much for helping me out!! :)

Link to post
Share on other sites
9 hours ago, ZachSaucier said:

Hey Faizan, welcome to the GreenSock forums. 

 

In addition to the solid advice of Craig, there are several things I'd recommend you change:

  • Remove the CSS transition on the divs. You should try to keep all animation within GSAP so there's no conflict between animations. I would probably also animate the red rectangle that way instead of using a class name change, but that's up to you.
  • You don't need to do things like var textArr = $('h1.typist'). You can just pass in "h1.typist" as your target in GSAP and GSAP will find the element for you. 
  • Secondarily, if you are using variables, you don't also need to pass them as parameters in your updateText function. That function already has access to those variables through scoping, so don't make the code more muddled by passing around the same variables to the function (especially with the same name).
  • You should probably use your updateText function to set the initial state of the animation (unless you do as Craig suggests and use separate SplitText elements for each phrase and animate them instead - the way that Craig suggests is preferable 99% of the time). 
  • Since arrays are 0 indexed, you need to use if (counter === textArr.length - 1) { <— notice the - 1.
  • Class name tweens are not recommended. It seems like you were just using it to toggle a class, so I changed them to .set()s instead.
  • You should use autoAlpha to fade in from visibility: "hidden"
  • ScrollMagic is unrelated to this part of your project, so next time when creating a demo to show your issue I would probably remove it :) 

 

 

 

 

I hope that helps. Feel free to ask questions! 

 

Happy tweening.

Thank you so much Zach, but after changing text, now the Yoyo effect is not working... :( Can you help me with this?? 

Link to post
Share on other sites
6 hours ago, Faizan Ahmed said:

now the Yoyo effect is not working... :( Can you help me with this?? 

It's probably best to not use timelines if you're going with your approach - just use callbacks instead:

 

See the Pen WNePYzX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

With that being said, you should probably use set split text animations initialized at the start and just go between them like Craig suggested above. This approach gets messy really quickly (as you can see in the demo). 

  • Like 3
Link to post
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.

×