Start learning now
Get started

Thank you for your interest and welcome!

We’ve just sent you an email! Check your inbox (and spam folder) and save our email so you don’t miss what’s next!

Meanwhile, rendez-vous here:

041
Dynamic hover

In this effect, each sentence will animate when hovered over by the user's cursor. But that's not all! To maximize the fun, the movement will propagate letter by letter, from the center outward, starting from the first letter hovered. Let’s get started!

HTML Structure

Each animated sentence consists of a visible version and a hidden duplicate.

<ul class="content">
    <li class="item">
        <span class="hidden">Get back Jamie</span>
        <span class="visible">Get back Jamie</span>
    </li>
    <li class="item">
        <span class="hidden">Deadly 60</span>
        <span class="visible">Deadly 60</span>
    </li>
    ...
</ul>

Join Made With Gsap to
unlock the full tutorial

Get access