Instructions
Code Documentation
Animation Documentation – Webflow GSAP Panel (Nexan Studio)
1. Page Load Hero Animation
Trigger
- Page load (When page finishes loading)
Elements
- Hero heading
- Hero paragraph
- CTA button
Animation Behavior
- Elements fade in (opacity: 0 → 1)
- Slight upward movement (y: 20px → 0)
- Staggered timing (one after another)
Timing
- Duration: ~0.6–0.8s
- Delay between items: ~0.1–0.2s
Result
Creates a smooth intro reveal that feels premium and controlled.
2. Scroll Reveal (Global Sections)
Trigger
- Scroll into view (while scrolling down)
Elements
- Section titles
- Text blocks
- Cards (services, features, etc.)
Animation Behavior
- Fade in + upward motion
- opacity: 0 → 1
- y: 30px → 0
Timing
- Duration: ~0.6s
- Ease: power2.out style easing
Result
Content appears progressively, improving readability and flow.
3. Staggered Grid Animation (Services / Projects)
Trigger
- Section enters viewport
Elements
- Grid items (cards)
Animation Behavior
- Each card animates one-by-one (stagger)
- Fade + slight upward movement
Timing
- Stagger delay: ~0.1–0.15s per item
- Duration: ~0.5–0.7s
Result
Creates a cascade effect, making layouts feel dynamic instead of static.
4. Hover Interaction (Cards / Buttons)
Trigger
- Mouse hover
Elements
- Service cards
- Project cards
- Buttons
Animation Behavior
- Slight scale increase (scale: 1 → 1.03)
- Shadow or depth increase
- Optional image zoom
Timing
- Duration: ~0.3s
Result
Adds micro-interaction feedback, improving UX and interactivity.
5. Image / Media Reveal Animation
Trigger
- Scroll into viewport
Elements
- Images
- Project thumbnails
Animation Behavior
- Fade in + scale effect
- scale: 0.95 → 1
- opacity: 0 → 1
Timing
- Duration: ~0.7s
Result
Gives images a soft entrance, making visuals feel polished.
6. Navbar Scroll Behavior
Trigger
- Page scroll
Elements
- Navbar
Animation Behavior
- Initially transparent
- Becomes solid on scroll
- Slight shadow appears
Result
Improves navigation clarity while maintaining a clean hero section.
7. Text Emphasis / Section Headers
Trigger
- Scroll into view
Elements
- Headings
Animation Behavior
- Fade + slight upward motion
- Sometimes delayed after section container
Result
Draws attention to key content hierarchy.
8. About Page Animations
Key Differences
- More storytelling-focused
Animations Used
- Sequential text reveal
- Image + text combo stagger
- Smooth section transitions
Result
Creates a narrative flow, not just visual effects.
9. Services Page Animations
Focus
- Clarity + structure
Animations Used
- Clean staggered cards
- Minimal movement (less distraction)
Result
Keeps content readable while still modern.
10. Projects Page Animations
Focus
- Visual showcase
Animations Used
- Image hover zoom
- Card reveal on scroll
- Subtle transitions between items
Result
Highlights portfolio work with a premium feel.
Key Animation Principles Used
- Fade + Move (Y-axis) → most common pattern
- Staggering → creates rhythm
- Micro-interactions → improves UX
- Minimal motion → avoids distraction
- Consistent easing → smooth experience
Webflow Setup Notes
- All animations are created using:
- Webflow Interactions Panel (GSAP-based engine)
- No custom code required
- Use:
- “While scrolling in view”
- “Mouse hover”
- “Page load” triggers