skills.rest
ironkid90-s
ironkid90-sOFFICIAL
Explore all skills by this author →
GitHub

angular-gsap-animation-crafter

Generates Angular components with GSAP ScrollTrigger scroll animations from descriptions or reference media.

Updated Jun 14, 2026
Search Tags:#frontend#angular#component generation#gsap#parallax#scrolltrigger#scroll animation
One-click install
npx skills add https://github.com/ironkid90-s/lucky5-v7 --skill angular-gsap-animation-crafter-ironkid90-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-gsap-animation-crafter
Source: https://github.com/ironkid90-s/lucky5-v7/tree/main/.ptah/skills/angular-gsap-animation-crafter
Command: npx skills add https://github.com/ironkid90-s/lucky5-v7 --skill angular-gsap-animation-crafter-ironkid90-s

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @hive-academy/angular-gsap, and includes references (resource) and assets (resource) components.

What problem does it solve? Designing scroll-based animations in Angular requires deep knowledge of GSAP, ScrollTrigger configuration, easing curves, and trigger points. This Skill removes that guesswork by guiding you through designing, configuring, and generating complete Angular components using the @hive-academy/angular-gsap library. ## Core Features & Use Cases - Reverse-Engineer Reference Media: Analyze a video, GIF, or screenshot of a scroll interaction to detect animation types, easing, timing, and trigger points, then recreate them with angular-gsap directives. - Conversational Animation Design: Describe the effect you want (parallax, pinned sections, staggered entrances, hijacked scroll) and receive recommended directives, durations, and easing functions. - Production-Ready Templates: Start from documented page and section templates such as fullpage showcases, parallax heroes, split-panel timelines, and feature card grids. - Use Case: You want a landing page hero where the title slides up on entry and the background moves at half scroll speed. The Skill produces a complete standalone Angular component combining viewportAnimation and scrollAnimation directives with tuned timing. ## Quick Start Ask the assistant to create an Angular scroll animation component with a parallax hero background and staggered feature cards using the angular-gsap library.

Frequently Asked Questions about angular-gsap-animation-crafter

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

FAQPage Schema
How do I create scroll-triggered animations in Angular with GSAP?▼

Apply the scrollAnimation or viewportAnimation directives from @hive-academy/angular-gsap to any element and pass a configuration object with animation type, duration, easing, and trigger points. The directives wrap GSAP ScrollTrigger and handle setup and cleanup automatically.

How to recreate a scroll animation from a reference video in Angular?▼

Share the video or screenshot and the Skill analyzes animation types, easing curves, durations, and trigger positions, then maps them to angular-gsap directives. It generates a complete Angular component approximating the observed motion with documented customization notes.

Does angular-gsap support server-side rendering (SSR)?▼

Yes, all directives and services in @hive-academy/angular-gsap are SSR-compatible. Browser-only initialization uses afterNextRender and isPlatformBrowser checks, and GsapCoreService returns null on the server so animations safely skip execution.

What easing function should I use for GSAP scroll animations?▼

Use power2.out for most UI entrances, back.out(1.7) for bouncy metric cards, power3.inOut for dramatic scroll transitions, and none for parallax layers. Parallax must always use linear easing to avoid janky movement tied to scroll position.

Why do my GSAP scroll animations hurt performance?▼

Common causes include animating too many elements individually instead of using stagger on a parent, omitting once: true on one-time entrances, and using scrub values above 1.5. Limit simultaneous viewport animations to three to five and keep durations between 0.3 and 1.5 seconds.

Can I build a fullpage scroll presentation with Angular and GSAP?▼

Yes, use the HijackedScrollTimelineComponent with hijackedScrollItem directives to create step-by-step fullpage presentations. Configure scrollHeightPerStep, slideDirection per step, scrub smoothing, and step indicators synced to the current step output event.

Related Skills

Explore More Software Engineering Skills→
ironkid90ironkid90

angular-3d-scene-crafter

Create interactive 3D scenes with Angular components and Three.js.

Community
Advanced
brainbrewlabsbrainbrewlabs
7

doc-publishing

Publishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.

Official
Intermediate
supersterlingsupersterling
1

design-engineering

Guides frontend developers to implement polished, accessible UI components with defined constraints and a review checklist.

Community
Advanced
smithisrealdevsmithisrealdev

animation-designer

Design and implement web animations with Framer Motion and CSS.

Community
Intermediate