Skip to content
Get Started

Integrations // Motion Enhancements

Use GSAP or Anime.js as optional enhancement, never as core dependency.

Velora remains native-first: motion primitives work with HTML/CSS only. JS engines are layered only when a project needs advanced sequencing.

Zero-JS Motion Motion API Catalog
Baseline CSS timelines first
Enhancement JS only when needed
Contract No lock-in to runtime
native-first optional JS progressive

Act I // GSAP ScrollTrigger

Map ScrollTrigger orchestration to existing Velora tokens.

Keep design values in CSS tokens. Let GSAP coordinate complex choreography while preserving tokenized duration, easing and spacing.

Token --vl-duration-slow Duration source of truth
Token --vl-ease-cinematic Easing contract stays in CSS
Pattern ScrollTrigger timeline Use only for advanced sequencing

Act II // Anime.js Timeline

Compose micro-sequences while keeping vl-stagger semantics.

Anime.js can drive local timelines for cards or labels. Keep semantic structure and reduced-motion behavior in CSS.

Card Pattern Micro-Feedback Zero-JS fallback
  • Timeline stagger() by token rhythm
  • Targeting data-role attributes over deep selectors
  • Fallback CSS-first static output stays readable

Act III // Example Snippets

Reference integration snippets (no runtime imported here).

The examples below show how to plug JS runtimes into already semantic Velora markup. This page is documentation only and does not execute JS libraries. 

// GSAP + ScrollTrigger (example only)
// import gsap from "gsap";
// import { ScrollTrigger } from "gsap/ScrollTrigger";
// gsap.registerPlugin(ScrollTrigger);

// gsap.timeline({
//   scrollTrigger: {
//     trigger: "[data-scene='hero']",
//     start: "top 70%",
//     end: "bottom 30%",
//     scrub: true
//   }
// })
// .from("[data-role='kicker']", { y: 28, opacity: 0, duration: 0.6 })
// .from("[data-role='title']", { y: 40, opacity: 0, duration: 0.9 }, "<0.08")
// .from("[data-role='lead']", { y: 22, opacity: 0, duration: 0.7 }, "<0.08");
// Anime.js timeline (example only)
// import anime from "animejs";

// anime.timeline({ easing: "cubicBezier(0.22, 1, 0.36, 1)" })
//   .add({
//     targets: "[data-role='chip']",
//     translateY: [12, 0],
//     opacity: [0, 1],
//     delay: anime.stagger(80),
//     duration: 420
//   })
//   .add({
//     targets: "[data-role='meter-fill']",
//     width: ["0%", "72%"],
//     duration: 560
//   }, "-=220");

Keep token values in CSS variables and treat JS timelines as optional orchestration.

Act IV // Applied

Baseline in CSS. Enhancement in JS. Contract always intact.

Use GSAP or Anime.js only when timeline complexity justifies it. Velora remains portable and robust when JavaScript is absent.

Review Native Motion Open Scene Hero Open Motion API