skills.rest
franzenjb
franzenjbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

animated-web-pages

Create scroll-driven GIS visualizations with GSAP and ScrollTrigger animations.

Updated Aug 23, 2026
Search Tags:#data-visualization#GIS#ScrollTrigger#GSAP#kinetic#scrollytelling
One-click install
npx skills add https://github.com/franzenjb/claude-skills --skill animated-web-pages
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animated-web-pages
Source: https://github.com/franzenjb/claude-skills/tree/main/animated-web-pages
Command: npx skills add https://github.com/franzenjb/claude-skills --skill animated-web-pages

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps designers and developers craft engaging, motion-enabled web pages that translate GIS data into immersive, scroll-driven experiences, accelerating interactive storytelling.

Core Features & Use Cases

  • GSAP/ScrollTrigger powered animations for scroll-driven storytelling and dashboards.
  • Calder Mobile style floating elements for subtle, performance-friendly motion.
  • Perspective grid integration and disaster/humanitarian data theming for GIS narratives.
  • Use cases include scrollytelling maps, animated dashboards, and data-driven storytelling experiences.

Quick Start

Include GSAP and ScrollTrigger in your HTML via CDN, then initialize animations by selecting elements (e.g., .node) and applying a GSAP timeline. Start with a basic map container and progressively enhance with motion as users scroll.

Frequently Asked Questions about animated-web-pages

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create scroll-driven GIS data visualizations for web storytelling?▼

Scroll-driven GIS data visualizations are created by integrating GSAP and ScrollTrigger libraries to animate map containers and elements as users scroll, enabling immersive, kinetic data storytelling experiences.

Can I use GSAP and ScrollTrigger to build animated dashboards?▼

Yes, GSAP and ScrollTrigger can be used to build animated dashboards by initializing timelines on selected elements, applying progressive motion enhancements to data-driven components as users navigate the page.

What is scrollytelling and how does motion enhance GIS narratives?▼

Scrollytelling is a narrative technique where story progression is tied to scrolling. Motion enhances GIS narratives by using Calder Mobile-style floating elements and perspective grids to visualize disaster and humanitarian data dynamically.

How do I add Calder Mobile style floating elements to a map container?▼

Calder Mobile style floating elements are added by selecting HTML elements and applying GSAP timelines to create subtle, performance-friendly motion that complements the core map container.

Do I need to install dependencies to use kinetic web page animations?▼

No local installation is required. You include GSAP and ScrollTrigger libraries in your HTML via CDN, then initialize animations by selecting elements and applying GSAP timelines to achieve kinetic motion.

What's the best way to theme disaster and humanitarian data in an animated dashboard?▼

Theming disaster and humanitarian data involves integrating perspective grids with GSAP timelines, applying scroll-triggered motion to data elements to visualize GIS narratives effectively within the dashboard.

Related Skills

Explore More Design & Creative Skills→
karenrebecagkarenrebecag

gsap-scrolltrigger

Implement GSAP ScrollTrigger for scroll-driven animations in web development.

Community
Intermediate
nakato156nakato156

scientific-scrollytelling-ui

Transform scientific reports into interactive scrollytelling interfaces with web standards.

Community
Advanced
cap-collectifcap-collectif
26

cartography

Build interactive maps with Leaflet, React-Leaflet, and Mapbox tiles.

Official
Intermediate
spqwspqw

observable-framework-lib-topojson

Convert TopoJSON files to GeoJSON for geospatial visualization in Observable Framework.

Community
Intermediate