Aeline

Instructions

Assets

All graphical assets in this template are licensed for personal and commercial use. If you'd like to use a specific asset, please check the license below.

Animations

This template uses GSAP for smooth scroll-triggered animations. Everything is controlled through a single code embed and custom attributes — no coding needed to customize.

Animation Types

Add any of these values to a data-anim custom attribute on any element:

card-reveal — Card fades in with a subtle scale effect. Used on visual and feature cards.
fade-up — Element fades in and slides up. Used on headings, text blocks, and images.
progress — Bar fills from 0% to its set width. Used on skill and progress bars.
stagger-rows — Children animate in one by one from the right. Used on lists and row layouts.
bar-grow — Bars grow upward like a chart. Used on bar chart visuals.
stagger-text — Text items fade in one by one. Used on stats and text groups.
orbit-reveal — Rings scale in with floating pill elements. Used on orbit and diagram cards.
marquee-left / marquee-right — Infinite auto-scrolling loop. Used on logo strips and text tickers.

Quick Customization Tips

Speed — In the embed code, find "duration:" and change the number (in seconds). Lower = faster.
Fade distance — Find "y: 40" and change the value. Higher number = element slides from further away.
Marquee speed — At the bottom of the code, find "35" in the initMarquee lines. Higher = faster scroll.
Easing — Find "ease:" values. Common options: "power2.out" (smooth), "back.out" (bouncy), "none" (linear).

Add Animation to Any Element

1. Select the element in Webflow Designer.

2. Open Element Settings (gear icon).

3. Add a custom attribute: Name = data-anim, Value = any type from the list above (e.g. fade-up).

4. Publish — the animation will work automatically.

Remove Animation

Select the element → Element Settings → delete the data-anim custom attribute. The element will display without animation.

Animations are automatically disabled for users who have "Reduce Motion" enabled in their system preferences.