New way of typewriter

[Nasr Galal 0 Likes (Newbie)]

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

[GreenSock 18,257 Likes (Superhero)]

If I understand your goal correctly, you could to that quite easily with TextPlugin. You don't even need SplitText in this case: 

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

 

Is that what you were looking for or did I misunderstand? 

[Nasr Galal 0 Likes (Newbie)]

Super like the approach!

it looks even simpler!

 

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

https://codesandbox.io/s/nw10kz7m3j

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!

[PixelBorder 1 Likes (Newbie)]

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?

 

$(document).ready(function(){

    //GSAP ANIMATION
        gsap.registerPlugin(ScrollTrigger);
        
        //typewriter
        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"
        })
        
});

 

[SteveS 177 Likes (Specialist)]

Make sure you register TextPlugin

[PixelBorder 1 Likes (Newbie)]

Legend. Thank you Steve - that fixed it.

[SJH 8 Likes (Newbie)]

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?

[Rodrigo 5,082 Likes (Superhero)]

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!

[GreenSock 18,257 Likes (Superhero)]

Here's one idea: 

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

[SJH 8 Likes (Newbie)]

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