Skip to content

studiokyne/sk-motion

BranchesTags

Repository files navigation

SK Motion

npm bundle gsap vite

Librairie d’animations front-end Studio Kyne pour WordPress / Bricks Builder.

Tags: WordPress, Bricks Builder, GSAP, ScrollTrigger, SplitText, Lenis, IIFE

Apercu rapide

  • Animations GSAP prêtes a l'emploi pour le contenu editorial.
  • ScrollTrigger, SplitText et Lenis intégrés avec une config centralisée.
  • Personnalisation simple via window.SKMotionConfig ou StudioKyneMotion.init().
  • Respect de prefers-reduced-motion.

Référence rapide

Animation Classe Usage
Reveal .sk-reveal Entrée simple en translation verticale
Fade .sk-fade Apparition en opacité
Entry blur .sk-entry-blur Entrée plus premium avec léger blur
Scale in .sk-scale-in Scale léger sans blur
Scale in blur .sk-scale-in-blur Scale léger avec blur subtil
Counter .sk-counter Compteur SEO-safe
Hover underline .sk-hover-underline Soulignement au hover
Text reveal .sk-text-lines Révélation ligne par ligne
Text highlight words .sk-text-highlight-words Mise en avant mot par mot
Text highlight chars .sk-text-highlight-chars Mise en avant caractère par caractère

Installation avec Fluent Snippets

Créer un snippet PHP avec les réglages suivants :

  • Nom : SK Motion
  • Type : PHP
  • Exécution : front-end uniquement
  • Priorité : 20
add_action('wp_enqueue_scripts', function () {
    if (is_admin()) {
        return;
    }

    $sk_motion_url = 'https://cdn.jsdelivr.net/npm/@studiokyne/sk-motion@latest/dist/sk-motion.full.iife.min.js';

    wp_enqueue_script(
        'sk-motion',
        $sk_motion_url,
        [],
        null,
        [
            'strategy'  => 'defer',
            'in_footer' => true,
        ]
    );

    wp_add_inline_script(
        'sk-motion',
        'window.SKMotionConfig = {
            debug: new URLSearchParams(window.location.search).has("saDebug"),
            smoothScroll: true,
            forceTopOnBoot: true,
            startAt: "top 98%",
            reduceMotion: "auto",
             highlightEnd: "20%",
             highlightWordStagger: 0.25,
             highlightCharStagger: 0.10,
            animations: {
                reveal: {
                    fromY: 48,
                    duration: 0.65,
                    stagger: 0.1
                },
                opacity: {
                    duration: 0.45,
                    stagger: 0.06
                },
                entryBlur: {
                    fromY: 20,
                    fromBlur: 12,
                    duration: 0.8,
                    stagger: 0.08
                },
                scaleIn: {
                    fromScale: 0.9,
                    duration: 0.55,
                    stagger: 0.08
                },
                scaleInBlur: {
                    fromScale: 0.86,
                    fromBlur: 10,
                    duration: 0.7,
                    stagger: 0.08
                },
                counter: {
                    duration: 1.35
                },
                textReveal: {
                    fromYPercent: 120,
                    duration: 0.95,
                    stagger: 0.08
                },
                highlightWords: {
                    opacity: 0.08
                },
                highlightChars: {
                    opacity: 0.08
                }
            },
            selectors: {
                reveal: ".sk-reveal",
                textReveal: ".sk-text-lines",
                opacity: ".sk-fade",
                entryBlur: ".sk-entry-blur",
                scaleIn: ".sk-scale-in",
                scaleInBlur: ".sk-scale-in-blur",
                counter: ".sk-counter",
                textHighlightWords: ".sk-text-highlight-words",
                textHighlightChars: ".sk-text-highlight-chars"
            }
        };',
        'before'
    );
}, 20);

Classes disponibles

Reveal classique

<div class="sk-reveal">Contenu à révéler</div>

Options d'animation:

  • animations.reveal.fromY : distance de départ en pixels.
  • animations.reveal.duration : durée de l'animation.
  • animations.reveal.stagger : décalage entre éléments batchés.

Fade (opacity)

<div class="sk-fade">Contenu à révéler en opacité</div>

Options d'animation:

  • animations.opacity.duration : durée de l'animation.
  • animations.opacity.stagger : décalage entre éléments batchés.

Entry blur

<div class="sk-entry-blur">Contenu avec entrée moderne + léger blur</div>

Options d'animation:

  • animations.entryBlur.fromY : distance de départ en pixels.
  • animations.entryBlur.fromBlur : intensité du blur initial.
  • animations.entryBlur.duration : durée de l'animation.
  • animations.entryBlur.stagger : décalage entre éléments batchés.

Scale in

<div class="sk-scale-in">Bloc qui scale en douceur</div>

Options d'animation:

  • animations.scaleIn.fromScale : scale de départ.
  • animations.scaleIn.duration : durée de l'animation.
  • animations.scaleIn.stagger : décalage entre éléments batchés.

Scale in blur

<div class="sk-scale-in-blur">Bloc qui scale avec un léger blur</div>

Options d'animation:

  • animations.scaleInBlur.fromScale : scale de départ.
  • animations.scaleInBlur.fromBlur : intensité du blur initial.
  • animations.scaleInBlur.duration : durée de l'animation.
  • animations.scaleInBlur.stagger : décalage entre éléments batchés.

Counter

<div class="sk-counter">1250</div>

Le counter lit d'abord la valeur écrite dans le HTML, puis l'anime depuis 0 vers cette cible. Si le texte n'est pas lisible comme nombre, il bascule sur data-sk-target. La valeur HTML reste prioritaire quand elle est valide.

Formats HTML supportés par défaut:

  • 1250
  • 1 250
  • 1,250
  • 1.250
  • 1 250,5
  • 1,250.5

Le SEO reste servi par le contenu source initial tant que la valeur finale est présente dans le HTML.

Attributs et options:

  • data-sk-target : valeur cible numérique explicite si le texte HTML n'est pas exploitable.
  • data-sk-prefix : préfixe texte.
  • data-sk-suffix : suffixe texte.
  • data-sk-decimals : nombre de décimales forcées.
  • data-sk-duration : durée de l'animation.
  • animations.counter.duration : durée par défaut du tween.

Exemple:

<div
  class="sk-counter"
  data-sk-duration="1.4"
  data-sk-prefix="+"
  data-sk-suffix="%"
>
  1 250
</div>

Hover underline

<a href="#" class="sk-hover-underline">Lien souligné au hover</a>
<button type="button" class="sk-hover-underline">
  Bouton souligné au hover
</button>

Nom standard recommandé pour la library : .sk-hover-underline.

button-underline n'est plus supporté. Utilisez uniquement la version sk-.

Variables CSS disponibles :

  • --sk-hover-underline-thickness
  • --sk-hover-underline-gap
  • --sk-hover-underline-duration
  • --sk-hover-underline-ease
  • --sk-hover-underline-color

Comportement et personnalisation

  • L'underline est piloté par la taille de police : --sk-hover-underline-gap utilise des unités em dans le code (valeur par défaut : clamp(0.08em, 0.12em, 0.32em)). Cela permet à l'underline de rester proportionnel quand le font-size augmente.
  • Pour garder une position visuelle fixe par rapport à la baseline, le pseudo-élément ::after est positionné avec bottom: calc(-1 * var(--sk-hover-underline-gap)).
  • Le composant ajoute une petite padding-bottom automatiquement pour éviter que le layout ne saute, mais la position visuelle réelle reste contrôlée par --sk-hover-underline-gap.
  • L'animation se dévoile de gauche à droite au hover (origine contrôlée par --sk-hover-underline-origin) et se referme dans l'autre sens quand la souris quitte l'élément.

Exemples:

.sk-hover-underline {
  /* valeurs par défaut */
}
.sk-hover-underline.big-title {
  --sk-hover-underline-gap: 0.25em; /* élargir l'écart pour les très gros titres */
  --sk-hover-underline-thickness: 3px;
}

Text reveal (lines)

<h2 class="sk-text-lines">Texte reveal ligne par ligne</h2>

Options d'animation:

  • animations.textReveal.fromYPercent : position de départ en pourcentage.
  • animations.textReveal.duration : durée de l'animation.
  • animations.textReveal.stagger : décalage entre les lignes.

Text highlight (words)

<p class="sk-text-highlight-words">Texte highlight mot par mot</p>

Options d'animation:

  • animations.highlightWords.opacity : opacité initiale des mots.
  • highlightWordStagger : stagger de révélation des mots.

Text highlight (chars)

<p class="sk-text-highlight-chars">Texte highlight lettre par lettre</p>

Options d'animation:

  • animations.highlightChars.opacity : opacité initiale des caractères.
  • highlightCharStagger : stagger de révélation des caractères.

Debug

Ajouter ?saDebug à l’URL pour afficher les markers ScrollTrigger.

Exemple :

https://monsite.com/?saDebug

Accessibilité

prefers-reduced-motion: reduce est respecté. Les animations sont désactivées et le contenu reste visible.

Configuration

Vous pouvez configurer la librairie via window.SKMotionConfig ou StudioKyneMotion.init({ ... }).

  • debug (boolean, defaut: detecte via ?saDebug) : active les markers ScrollTrigger.
  • smoothScroll (boolean, defaut: true) : active Lenis.
  • forceTopOnBoot (boolean, defaut: true) : force un scroll top au chargement.
  • startAt (string, defaut: "top 98%") : position de declenchement ScrollTrigger.
  • highlightEnd (string, defaut: "center") : fin du reveal des highlights en mode scrub.
  • highlightWordStagger (number, defaut: 0.04) : stagger entre les mots (highlight words).
  • highlightCharStagger (number, defaut: 0.015) : stagger entre les caracteres (highlight chars).
  • ease (string, defaut: "smoothKyne") : easing GSAP utilise.
  • waitForFonts (boolean, defaut: true) : attend le chargement des webfonts avant d'initialiser.
  • fontReadyTimeout (number ms, defaut: 1500) : timeout max pour l'attente des fonts.
  • animations (object) : surcharge des animations par famille.
    • reveal: fromY, duration, stagger.
    • opacity: duration, stagger.
    • entryBlur: fromY, fromBlur, duration, stagger.
    • scaleIn: fromScale, duration, stagger.
    • scaleInBlur: fromScale, fromBlur, duration, stagger.
    • counter: duration.
    • textReveal: fromYPercent, duration, stagger.
    • highlightWords: opacity.
    • highlightChars: opacity.
  • selectors (object) : mapping des classes CSS.
    • reveal, textReveal, opacity, entryBlur, scaleIn, scaleInBlur, counter, textHighlightWords, textHighlightChars.
  • autoInit (boolean, defaut: true) : desactive l'auto-init si false.
  • reduceMotion ("auto" | boolean, defaut: "auto") :
    • "auto" respecte prefers-reduced-motion.
    • true force la reduction (pas d'animations).
    • false force les animations.

Exemple complet plus lisible:

window.SKMotionConfig = {
  startAt: "top 92%",
  highlightEnd: "25%",
  highlightWordStagger: 0.18,
  highlightCharStagger: 0.05,
  animations: {
    reveal: {
      fromY: 30,
      duration: 0.5,
      stagger: 0.06,
    },
    scaleIn: {
      fromScale: 0.94,
    },
    counter: {
      duration: 1.5,
    },
  },
};

Exemple de surcharge légère:

window.SKMotionConfig = {
  animations: {
    scaleIn: {
      fromScale: 0.95,
      duration: 0.75,
    },
    counter: {
      duration: 1.6,
    },
  },
};

Fonctions console

Relancer le scan :

window.__skMotionScan();

Rafraîchir ScrollTrigger :

window.__skMotionRefresh();

Voir la version :

window.StudioKyneMotion.version;

Mise à jour

Pour publier une correction :

git commit -m "fix: corrige le text reveal"
git push

Pour publier une nouvelle fonctionnalité :

git commit -m "feat: ajoute une nouvelle animation"
git push

Pour publier un changement cassant :

git commit -m "feat!: change la configuration globale"
git push

About

Librairie d’animations front-end Studio Kyne pour WordPress / Bricks Builder

Topics

wordpress gsap iife scrolltrigger splittext lenis bricksbuilder

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases 12

v1.2.8 Latest
May 18, 2026
+ 11 releases

Contributors

Languages