Scroll Animations

AlonePro includes a built-in, lightweight animation framework powered by GSAP (GreenSock) and ScrollTrigger. You can add scroll-triggered entrance animations to any Gutenberg block — core WordPress blocks or third-party blocks — without writing custom JavaScript.

How to Apply Animations

Select any block in the editor (e.g. Group, Heading, Image, Columns).
In the block inspector (right sidebar), expand the Advanced panel.
In the Additional CSS class(es) field, enter one of AlonePro's animation utility classes (e.g., animation-fade-in-up).
(Optional) Add data attributes on the block in the Code Editor view to fine-tune duration, delay, or distance.

Available Animation Utility Classes

Class Name	Animation Behavior
`animation-fade-in`	Subtle opacity fade in.
`animation-fade-in-up`	Fade in with vertical upward translation.
`animation-fade-in-down`	Fade in with vertical downward translation.
`animation-fade-in-left`	Fade in translating from the left.
`animation-fade-in-right`	Fade in translating from the right.
`animation-zoom-in`	Fade in with smooth scale up ($0.9 \to 1.0$).
`animation-zoom-out`	Fade in with smooth scale down ($1.1 \to 1.0$).
`animation-fade-list-grid`	Staggered entrance applied sequentially to every direct child list item (`ul > li`) or grid card.
`animation-inner-fade`	Animates all direct children sequentially on scroll enter.
`animation-svg-draw`	Animates SVG stroke line paths with staggered line drawing.
`animation-parallax`	Vertical parallax effect shifting element position based on scroll velocity.

Configuration Data Attributes

Fine-tune animation parameters by editing the block markup or adding HTML attributes:

Data Attribute	Default	Description	Example
`data-delay`	`0`	Delay in seconds before the animation begins.	`data-delay="0.3"`
`data-duration`	`0.8`	Animation duration in seconds.	`data-duration="1.2"`
`data-ease`	`power3.out`	GSAP easing formula.	`data-ease="back.out(1.7)"`
`data-distance`	`40`	Pixel distance for directional slide animations.	`data-distance="60"`
`data-stagger`	`0.1`	Stagger offset in seconds for list items or child elements.	`data-stagger="0.15"`
`data-parallax-speed`	`0.35`	Parallax factor (positive for upward, negative for downward).	`data-parallax-speed="0.5"`

HTML Example

<!-- wp:group {"className":"animation-fade-in-up"} -->
<div class="wp-block-group animation-fade-in-up" data-duration="1" data-distance="50">
  <h2>Empowering Communities Worldwide</h2>
  <p>Join our mission to deliver education, healthcare, and clean water.</p>
</div>
<!-- /wp:group -->

Accessibility: Reduced Motion

AlonePro fully respects user accessibility preferences. When a visitor has enabled prefers-reduced-motion: reduce in their operating system settings:

All GSAP scroll animations are automatically bypassed.
Elements render immediately in their final resting position without delays or motion shifts.

Extending Animations (Developer API)

Developers can register custom GSAP presets using the global registration function:

if ( window.nextoraRegisterScrollAnimation ) {
  window.nextoraRegisterScrollAnimation( 'animation-flip-in', ( { distance = 40 } ) => ( {
    from: { opacity: 0, rotateX: 45, y: distance },
    to: { opacity: 1, rotateX: 0, y: 0, ease: 'power2.out' },
  } ) );
}

Mission Card Overview