Simple typewritter effects with gsap 3?

[Kutomba]

Hi 

 

I am trying to create a simple typewritter effects with gsap 3, here is my solution

 

      $('.button-li').on('click', function(){
        $(".textbox").addClass('anim-typewriter');
        $(".textbox").addClass('line-1');

        var activeData = $(this).attr("data-active");

        switch (activeData) {
            case 'typing':
                console.log('Typing animation');

                var fieldTimeline = gsap.timeline({
                    paused: true,

                });

                // letter animation
                fieldTimeline.fromTo('.textbox', 8, {
                    width: "0",
                }, {
                    width: "20.18em",
                    /* same as CSS .line-1 width */
                    ease: SteppedEase.config(37)
                }, 0);
                // text cursor animation
                fieldTimeline.fromTo('.textbox', 0.5, {
                    "border-right-color": "rgba(255,255,255,0.75)"
                }, {
                    "border-right-color": "rgba(255,255,255,0)",
                    repeat: -1,
                    ease: SteppedEase.config(37)
                }, 0);
            break;
        }
      })

 

Unfortunaatelly this is not working, what is wrong here?

 

 

See the Pen LYNRvQr by makumba (@makumba) on CodePen

[ZachSaucier]

Hey Kutomba. You're still not using the GSAP 3 syntax like we instructed you to use. We highly recommend that you use it.

You again have broken CSS. I suggest that you use a formatter and validator for your code so it's easier to find issues. If you're asking why your animation never runs it's because activeData will never be "typing" in your demo. 

 

Your question has nothing to do with GSAP. I think StackOverflow would be more helpful for most of your questions that you've posted here. Unfortunately we don't have the capacity to help with every non-GSAP question. If you continue to ask questions like these we may not be able to answer.