Animation scroll in Javascript e GreenSock

Mattepuffo's logo
Animation scroll in Javascript e GreenSock

Animation scroll in Javascript e GreenSock

Programmazione, Javascript - AJAX

GreenSock è una libreria per Javascript che ci permette di creare moltissime animazioni.

In questo articolo vediamo come usarla per animare gli elementi durante lo scroll.

Per l'installazione ho usato CDN, ma ci sono altri metodi.

Qui sotto un esempio completo:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>TEST</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

        <style>
            .item {
                border: 1px solid #f16d01;
                border-radius: 20px;
                height: 300px;
                width: 300px;
                margin: 0 auto 10px;
                padding: 20px;
            }
        </style>

    </head>
    <body>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>
        <div class="item">Lorem ipsum</div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>

        <script>
            const items = gsap.utils.toArray('.item');
            items.forEach(item => {
                const animazione = gsap.fromTo(
                    item,
                    {
                        autoAlpha: 0,
                        y: 100,
                        x: -100,
                        rotate: -10
                    },
                    {
                        duration: 0.6,
                        autoAlpha: 1,
                        y: 0,
                        x: 0,
                        rotate: 0
                    }
                );

                ScrollTrigger.create({
                    trigger: item,
                    animation: animazione
                });
            });
        </script>
    </body>
</html>

Enjoy!

Condividi

Commentami!