Как сделать такую анимацию?

Question

[fantastikgodd]

первый блок
там где to grow

тоесть набор теста и сбоку линия

https://ohio.clbthemes.com/demo8/

UPDATE - p.s. нативным способом, без библиотек

Answer 1

[ildar-meyker]

Вроде ничего сложного. https://codepen.io/ildar-meyker/pen/zYoGOXa

Comments

[fantastikgodd]

ildar-meyker, класс) спасибо)

[fantastikgodd]

ildar-meyker, а можно как то оставить анимацию класса cursor после того как текст появился?

[ildar-meyker]

fantastikgodd, анимация же бесконечная. Я вас не понял.

Answer 2

[FeST1VaL]

typed.js

В вашем примере сделано это так. т.е опции находятся в атрибутах нужного текста

function handleOhioDynamicTextSc() {
        $('div[data-dynamic-text="true"]').each(function () {
            var options = JSON.parse($(this).attr('data-dynamic-text-options'));
            new Typed('#' + $(this).attr('id') + ' .dynamic', options);
        });
    }

    $(window).on('ohio:handle_ohio_dynamic_text', handleOhioDynamicTextSc);

Comments

[fantastikgodd]

FeST1VaL, это да, библиотека. но может кто-то делал без библиотек