Jak zrobić mikroanimacje przy scrollowaniu strony w stylu Framer i Webflow?

Nowoczesne strony internetowe, tworzone w narzędziach takich jak Framer czy Webflow, zachwycają płynnością i dbałością o detale. Elementem tego doświadczenia są animacje przy scrollowaniu, które aktywują się, gdy użytkownik przewija stronę i dany element wchodzi w pole widzenia.

W tym artykule opiszę, jak osiągnąć taki sam efekt, wykorzystując czysty JavaScript (a konkretnie Intersection Observer API) oraz CSS, tworząc proste, uniwersalne i wydajne rozwiązanie. Dzięki temu mając stronę poza środowiskiem Framera czy Webflow, np. na WordPressie, możemy wdrożyć takie same animowane elementy przy scrollowaniu.

Jak to działa?

Nie trzeba polegać na ciężkich bibliotekach. Współczesne przeglądarki oferują natywne narzędzie o nazwie Intersection Observer API. Zasada działania jest prosta:

Obserwacja. JavaScript (wykorzystując IntersectionObserver) nieustannie monitoruje, czy zdefiniowany element HTML jest widoczny w obszarze ekranu (viewport).

Aktywacja. Gdy element wchodzi w pole widzenia, JavaScript dodaje do niego specjalną klasę CSS (np. is-visible).

Animacja. Klasa CSS (is-visible) zmienia początkowe style elementu (np. opacity: 0, transform: translateY(50px)) na style docelowe (np. opacity: 1, transform: none). Dzięki właściwości transition przejście to staje się płynną animacją.

Obserwator (The Intersection Observer)

Poniższy kod JavaScript odpowiada za monitorowanie elementów i dynamiczne dodawanie klasy aktywującej. Wykorzystuje klasę bazową, np. .shps-animated, aby zidentyfikować wszystkie elementy, które mają być animowane.

document.addEventListener('DOMContentLoaded', (event) => {
        
        // JS szuka klasy bazowej, która grupuje wszystkie elementy animowane
        const elementsToAnimate = document.querySelectorAll('.shps-animated');
        
        if (elementsToAnimate.length === 0) return; // Zabezpieczenie

        const options = {
            root: null, // Obserwujemy względem viewportu (całego okna przeglądarki)
            threshold: 0 // Animacja uruchamia się natychmiast, gdy tylko element się pojawi
        };

        const observerCallback = (entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // Dodanie klasy 'is-visible' wyzwala odpowiednią animację
                    entry.target.classList.add('is-visible');
                    // Przestajemy obserwować ten KONKRETNY element, żeby nie animować go ponownie
                    observer.unobserve(entry.target); 
                }
            });
        };

        const observer = new IntersectionObserver(observerCallback, options);

        // Pętla, która obserwuje KAŻDY znaleziony element z klasą .shps-animated
        elementsToAnimate.forEach(element => {
            observer.observe(element);
        });
    });

Definicja stylów i animacji

W kodzie CSS musimy zdefiniować bazowe style przejścia oraz konkretne stany początkowe i końcowe dla różnych efektów.

Klasa bazowa

Klasa .shps-animated zawiera wspólne ustawienia dla wszystkich animowanych elementów, w szczególności kluczową właściwość transition, która zapewnia płynność:

.shps-animated {
    transform-style: preserve-3d;
    /* Czas animacji: 0.8 sekundy dla zmiany przezroczystości i transformacji */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
    /* Stan początkowy dla niewidocznych elementów (opóźnienie animacji) */
}

Gotowe efekty w stylu Framer/Webflow

Następnie definiujemy gotowe do użycia efekty. Każdy z nich wykorzystuje kombinację transform (przesunięcie, skalowanie) i opacity (przezroczystość). Na przykład wjeżdżanie z dołu (slide-up).

Klasa: .shps-slide-up w pliku CSS:

/* EFEKT 1: WJEŻDŻANIE Z DOŁU */
.shps-slide-up {
    /* Stan Początkowy: Przesunięty o 50px w dół i niewidoczny */
    transform: translate3d(0px, 50px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    opacity: 0;
}
.shps-slide-up.is-visible {
    /* Stan Końcowy: W domyślnej pozycji i widoczny */
    transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    opacity: 1;
}

Implementacja na stronie

Aby użyć animacji, wystarczy dodać do elementu dwie klasy. Klasę bazową do obserwowania: shps-animated oraz klasę efektu, który chcesz zastosować (np. shps-slide-up).

Przykład użycia:

<div class="shps-animated shps-slide-up">
    <h2>Wjeżdżanie z dołu</h2>
    <p>Ten element zanimuje się, gdy tylko pojawi się na ekranie.</p>
</div>

Opisane w tym artykule rozwiązanie wdrożyłem na tej stronie. Odśwież stronę, aby jeszcze raz zobaczyć jak działa animacja.

Tagi: animacje, mikroanimacje