Jump to content
Search Community

New way of typewriter

Nasr Galal test
Moderator Tag

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

  • 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?

 

$(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"
        })
        
});

 

Link to comment
Share on other sites

  • 6 months later...

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

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...