JS Animation Lessons

Lottie Foundations Lottie lets teams bring motion design into web apps as. Where it fits Onboarding and empty states Success-state or status animations Design-dev collaboration around reusable motion assets Good first rules Choose only a few meaningf

const animation = { file:'success.json', loop:true, autoplay:false };
console.log(animation);

Working Productively with Lottie Good Lottie use is about pairing motion with meaning so animation supports the product instead of stealing attention from it. Patterns to practice Lazy-load heavier assets below the fold Trigger playback from clear us

const triggers = { onVisible:'play', onComplete:'show CTA', onReducedMotion:'swap static illustration' };
console.log(triggers);

Production Lottie Production Lottie work includes performance budgets, accessibility, and deciding when a simpler motion system is the better choice. Production checklist Measure file size and CPU cost Offer reduced-motion fallbacks Document where mo

const budget = { maxFileKb:120, loadStrategy:'defer', accessibility:'respect reduced motion' };
console.log(budget);

Velocity.js Foundations Velocity.js gives teams a programmatic animation approach for DOM-heavy interfaces. Where it fits Drawers, panels, and tooltip motion Sequenced UI feedback Reusable motion helpers for older or mixed codebases Good first rules

const motion = { target:'.panel', props:['opacity','translateY'], durationMs:300 };
console.log(motion);

Working Productively with Velocity.js The practical skill is orchestrating timing, easing, and UI state transitions so motion feels intentional instead of bolted on. Patterns to practice Encapsulate enter, exit, and highlight states Coordinate multip

const sequence = [{ step:'overlay fade', durationMs:120 }, { step:'drawer slide', durationMs:280 }];
console.log(sequence);

Production Velocity.js Production animation work with Velocity requires lifecycle cleanup, performance awareness, and maintainable conventions. Production checklist Avoid layout-heavy effects on busy screens Create shared motion tokens Respect reduce

const system = { durations:['120ms','220ms','320ms'], easings:['easeOut'], safeguards:['reduced motion','cleanup'] };
console.log(system);

GSAP (GreenSock) Foundations GSAP is one of the most respected web animation libraries. Where it fits Hero sections and storytelling pages Polished app transitions Reusable motion systems for premium-feeling UI Good first rules Think in timelines, no

const timeline = ['headline fade', 'image reveal', 'cta pop'];
timeline.forEach((step, index) => console.log(index + 1, step));

Working Productively with GSAP (GreenSock) Intermediate GSAP work centers on choreography: how multiple motion beats reinforce a story or interaction instead of competing for attention. Patterns to practice Use timelines to express choreography clear

const sequence = { timeline:['overlay','panel','actions'], overlap:'stagger with shared easing' };
console.log(sequence);

Production GSAP (GreenSock) Advanced GSAP work demands discipline around scope, performance, accessibility, and product restraint. Production checklist Measure animation cost on real devices Respect reduced-motion preferences Keep timing and easing t

const governance = { tokens:['duration-sm','duration-md'], accessibility:['reduced motion'], review:['device test','design signoff'] };
console.log(governance);

Anime.js Foundations Anime.js offers an approachable API for animating DOM and SVG. Where it fits SVG and DOM animation Playful UI interaction Rapid motion prototypes before hardening patterns Good first rules Start with small transform sets Use stag

const staggerPlan = ['card 1', 'card 2', 'card 3'];
console.log('stagger', staggerPlan);

Working Productively with Anime.js Past the first animation, the real value is designing repeatable motion patterns and pacing that match the product voice. Patterns to practice Use staggered motion for ordered content Group related transforms so ele

const transforms = { opacity:[0,1], translateY:[20,0], scale:[0.96,1] };
console.log(transforms);

Production Anime.js Advanced Anime.js usage is about systemizing motion rules, managing device cost, and keeping expressive animation sustainable. Production checklist Review reduced-motion support Avoid too many simultaneous heavy transforms Documen

const rules = { presets:['enter','hover','celebrate'], guardrails:['reduced motion','device check'] };
console.log(rules);

Waypoints (scroll triggers) Foundations Waypoints helps teams connect scroll position to UI behavior so. Where it fits Section-aware navigation Progressive reveals on long pages Reading progress and viewport-triggered state Good first rules Use scrol

const sections = ['intro', 'features', 'faq'];
sections.forEach(section => console.log('watch waypoint for', section));

Working Productively with Waypoints (scroll triggers) Good scroll-triggered design is more about pacing and restraint than about firing an effect on every threshold. Patterns to practice Support reading flow and section awareness Combine visibility t

const triggers = { enter:'add active class', leave:'remove active class', offset:'80% viewport' };
console.log(triggers);

Production Waypoints (scroll triggers) Advanced scroll-trigger work is about performance, accessibility, and knowing when a simpler observer-based pattern may be better. Production checklist Avoid heavy work during scroll Protect keyboard and reading

const review = { perf:['light handlers','small updates'], ux:['clear orientation','no surprise jumps'] };
console.log(review);