Good Fella Lab

Blog

Working notes on GSAP and motion craft: the tutorials, comparisons and patterns behind the work. Written by Julian and Adrian Fella.

  1. Mid-scroll camera frame from the Crystal Peak Security mountain scene.Persistent Background Scenes in Nuxt 3: Scroll Restoration Without the SnapHow I kept a GSAP + Lenis mountain scene mounted across Nuxt page navigations and restored scroll position without breaking the camera. Real code from a recent build.
  2. GSAP 3.15 easeReverse property explained — fixing how easing behaves on reversed animationsGSAP easeReverse: The One-Line Fix Every Modal NeedsGSAP 3.15 added easeReverse, a property that fixes how easing behaves on reverse() animations. Here's why it matters and how to use it.
  3. Intersection Observer vs GSAP ScrollTrigger comparison for scroll animations in 2026Intersection Observer vs GSAP ScrollTrigger: Which Should You Use?Comparing Intersection Observer and GSAP ScrollTrigger for scroll animations. Performance, control, scrub, batch, and when each approach makes sense.
  4. GSAP page transitions in Next.js App Router — overlay and reveal animation between routesGSAP Page Transitions in Next.js: A Practical Guide (2026)Learn how to build smooth GSAP page transitions in Next.js App Router. Covers overlay animations, exit animations, useGSAP cleanup, and common pitfalls.
  5. GSAP hover effects tutorial — magnetic buttons, mouse tracking, and card tilt with GSAPGSAP Hover Effects: 5 Patterns Worth Knowing (2026)Learn how to build GSAP hover effects that feel polished. Covers play/reverse pattern, magnetic effects, quickTo for mouse tracking, and React implementation.
  6. GSAP stagger animation tutorial — animating lists and grids with timing offsetGSAP Stagger: Animate Lists and Grids with Rhythm (2026)Learn how to use GSAP stagger to animate multiple elements with perfect timing. Covers basic stagger, advanced object syntax, from options, and real-world grid reveals.
  7. CSS animations vs GSAP comparison — when to use each for web animation in 2026CSS Animations vs GSAP: When to Use Each (2026)CSS animations vs GSAP compared honestly. Performance, control, complexity, and clear use-case recommendations for developers choosing between the two.
  8. GSAP useGSAP hook in React and Next.js - animation setup with refs and cleanupGSAP in React: How to Use the useGSAP Hook (2026)Learn how to use GSAP in React with the useGSAP hook. Covers setup, refs, scoping, contextSafe callbacks, ScrollTrigger cleanup, and Next.js SSR patterns.
  9. GSAP timeline tutorial showing animation sequencing with gsap.timeline() position parameterGSAP Timeline Tutorial: Sequence Animations Like a Pro (2026)Learn how to use gsap.timeline() to sequence animations with precision. Covers the position parameter, defaults, labels, playback control, and real-world examples.
  10. GSAP ScrollTrigger tutorial showing multiple scroll animation patterns including parallax, reveals, and text effectsGSAP ScrollTrigger Examples: 10 Scroll Animations You Can Use TodayTen production-ready GSAP ScrollTrigger patterns: fade reveals, parallax, text effects, SVG drawing, mask reveals, and flip animations. Copy-paste code for each.
  11. GSAP SplitText tutorial showing character and line text animations with scroll triggersGSAP Text Animation: A Practical SplitText Guide (2026)How to animate text with GSAP SplitText. Covers chars, words, and lines with scroll-triggered reveals, stagger, and mask effects. Copy-paste examples included.
  12. GSAP vs Framer Motion vs React Spring comparison for React animation libraries in 2026GSAP vs Framer Motion vs React Spring: Which Should You Use in 2026?Comparing GSAP, Framer Motion, and React Spring for React animation. Bundle sizes, performance data, code examples, and honest recommendations.
  13. GSAP ScrollTrigger tutorial showing scroll-based animation with trigger markers and 60fps performanceGSAP ScrollTrigger Tutorial: Animate on Scroll (2025)Learn GSAP ScrollTrigger with step-by-step examples. Includes code snippets, performance tips, and ready-to-use scroll animations for your project.