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:

Exciting news! We've hit a huge milestone:
MWG now has 1,000 members! To celebrate it, we’re offering 15% off. Don’t miss out!

Use MILESTONE15 at checkout.
15% off until Sunday, Sept 14.

Get started

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