Jump to content

Nasr Galal

New way of typewriter

Recommended Posts

Just trying 2 different easy approaches to get this typewriter works like a charm!

My issue is to sync both animations of the #text element and the chars and I do believe it is really simple to do!

I am looking for an easy approach to take down this latency :)

this animation is what i need to edit:

// need to sync this block with the above animation
gsap.from('#text', {width: 2, duration: 2, ease: SteppedEase.config(20) })

my target is to code this without the use of any other JS Libs like jquery

See the Pen GRpMYYw by nasr3090 (@nasr3090) on CodePen

Link to comment
Share on other sites

Super like the approach!

it looks even simpler!


ok now If I would like to rebuild something like this awesome animation:


there are multiple lines, that's why I did try to build the simplest mechanics for the typo :)
if you have any other suggestions
, please share!

Thanks for the helpful code!

Link to comment
Share on other sites

  • 2 years later...

I'm trying to achieve this same thing but controlled by scrollTrigger instead. I can't seem to get it to work, any idea where I'm going wrong please?



        gsap.to(".intro", {
            scrollTrigger: {
                trigger: ".intro",
                toggleActions: "play none none reverse",
                start: "top 0"
            text: {
                value: "Let's get to work"
            duration: 5, 
            delay: 1, 
            ease: "none"


Link to comment
Share on other sites

Make sure you register TextPlugin

  • Like 1
Link to comment
Share on other sites

  • 6 months later...

This works great for a single line but the cursor cannot jump to a new line when the text goes beyond a single line. Thoughts?

Link to comment
Share on other sites

Hi @SJH,


Maybe create a SplitText instance to get the position of each line relative to a parent container, and use those DOM elements to get the Y position of each line. Or use the SplitText lines in order to use the text plugin on each line and move the cursor to that particular position or re-parent it.


There could be other workarounds for this, but right off the bat nothing seems to be extremely trivial and/or simple. But in most cases it seems that you have to check the width of the text wrapper, the width and height of the text content in order to position the cursor on each update.


Hopefully this helps get started. Let us know if you have more questions.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Yes, Jack! That's awesome! Exactly the answer I needed!!! This is why GreenSock is the best! Friggin' amazing! Thanks again, Jack!

  • Like 2
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.