SR Animations

Instead it applies scroll-triggered animations (fade, flip, slide, zoom), hover effects (scale, bounce, shake, and other keyframe presets), and advanced CSS transitions or custom keyframe styles to any CSS selector you target elsewhere on the page, using repeatable groups for each animation type. Pick it over every other bling or content module when the section already has its layout and media in place and you just need to add motion or interaction to existing elements. It expects valid CSS selectors matching elements already on the page, not its own image, text, or card content.

Use cases

Scroll fade-in on section headings
Hover scale on product cards
Staggered slide-up for feature list
Custom keyframe pulse on a cta button
Flip animation on testimonial cards
Zoom-in reveal for gallery images

Where it fits

Included with: Stack
Page sections: Not a page section

Editable fields

Content tab

Field	Type	Notes
Enabled	Boolean
Disable Scroll Animations On Mobile	Boolean	This option will prevent all elements from animating on mobile.

Scroll Animation Repeats.

Field	Type	Notes
Element Selector	Text	Enter the CSS selector for the element you want to animate (e.g., #myElement or .myClass).
Animation Category	Choice	Options: Fade, Flip, Slide, Zoom.
Fade Options	Choice	9 options, including Fade, Fade Up, Fade Down.
Flip Options	Choice	Options: Flip Up, Flip Down, Flip Left, Flip Right.
Slide Options	Choice	Options: Slide Up, Slide Down, Slide Left, Slide Right.
Zoom Options	Choice	10 options, including Zoom In, Zoom In and Up, Zoom In and Down.
Start Hidden	Boolean	Apply this class to hide the element initially.
Show Advanced Options	Boolean

Scroll Animation › Advanced Options

Field	Type	Notes
Animate Once	Boolean	Select whether the animation should trigger only once or each time you scroll to the element.
Animation Delay	Number	Animation delay (ms).
Animation Duration	Number	Animation duration (ms).
Trigger Offset	Number	Adjust the offset to trigger animations earlier or later (in pixels).
Easing Functions	Choice	Choose one of these timing functions to animate elements smoothly. 20 options, including linear, ease, ease-in.
Anchor Placement	Choice	You can set different placement options for each element. Each anchor-placement option has two words, like 'top-center', meaning the animation triggers when the element's top reaches the window's center. 'bottom-top' triggers when the element's bottom reaches the window's top, and so on. 9 options, including top-bottom, top-center, top-top.
Anchor Selector	Text	Anchor element, whose offset will be used to trigger the animation instead of the actual element's offset.

Hover Animation Repeats: default 0.

Field	Type	Notes
Hover Element Selector	Text
Animation Type	Choice	13 options, including Scale, Bounce, Flash.
CSS on Element	Html
CSS on Element Hover	Html
Scale Size	Number
Animation Speed	Number	Duration of the animation (ms).
Easing Functions	Choice	Choose one of these timing functions to animate elements smoothly. Options: linear, ease, ease-in, ease-out, ease-in-out.

Advanced Styling Repeats. Apply advanced styling and animations to elements.

Field	Type	Notes
Element Selector	Text	Enter the CSS selector for the element you want to style (e.g., #myElement or .myClass).

Advanced Styling › Styles Repeats. Configure the styling properties for the selected element.

Field	Type	Notes
Type	Choice	Choose when the styles should be applied. Options: Default, On hover, Scroll in view.
Opacity	Number	Set the transparency of the element (0% is fully transparent, 100% is fully opaque).
Position X	Text	Set the horizontal position of the element. You can use any CSS length unit, such as px, %, rem, em, vw, vh, etc.
Position Y	Text	Set the vertical position of the element. You can use any CSS length unit, such as px, %, rem, em, vw, vh, etc.
Scale	Number	Set the size of the element as a percentage of its original size.
Rotate	Number	Rotate the element (0-360 degrees).
Background Color	Choice	17 options, including Auto, Primary, Secondary.
Background Color	Color
Text Color	Choice	15 options, including Auto, Primary, Secondary.
Text Color	Color
Border Radius	Number
Shadow	Boolean
Horizontal	Number	A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box.
Vertical	Number	The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box.
Blur	Number	The blur radius. The higher the number, the more blurred the shadow will be.
Spread	Number	The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.
Inset	Boolean	Changes the shadow to an inner shadow.
Color	Color	The color of the shadow.

Advanced Styling › Styles Settings Configure the timing and behavior of the styles.

Field	Type	Notes
Duration	Number	Set how long the style transition should take.
Delay	Number	Set a delay before the style transition starts.
Animate Out	Boolean	For 'Scroll in view' animations, choose to animate out when the element leaves the viewport.
Transform Origin	Choice	Set the origin point for transformations like scale and rotate. Options: Top, Bottom, Left, Right.

Advanced Styling › CSS Animations Create custom CSS animations using keyframes.

Field	Type	Notes
Delay	Number	Set a delay before the animation starts.
Duration	Number	Set how long the animation should take to complete one cycle.
Iterations	Number	Set the number of times the animation should run. Use '0' to make the animation continue forever.
Easing Functions	Choice	Choose one of these timing functions to animate elements smoothly. 20 options, including linear, ease, ease-in.
Direction	Choice	Whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward. Options: Forwards, Reverse, Alternate, Alternate Reverse.
Fill Mode	Choice	Sets how a CSS animation applies styles to its target before and after its execution. Options: None, Forwards, Backwards, Both.

Advanced Styling › CSS Animations › Keyframes Repeats. Define the stages of your animation using keyframes.

Field	Type	Notes
Keyframe	Number	Set the percentage point of the animation where this keyframe occurs.
Opacity	Number	Set the transparency of the element at this keyframe.
Position X	Text	Set the horizontal position at this keyframe. You can use any CSS length unit, such as px, %, rem, em, vw, vh, etc.
Position Y	Text	Set the vertical position at this keyframe. You can use any CSS length unit, such as px, %, rem, em, vw, vh, etc.
Scale	Number	Set the size of the element at this keyframe as a percentage of its original size.
Rotate	Number	Set the rotation of the element at this keyframe (0-360 degrees).

Change log

Version	Change
3.0.1	Fixed an issue with the module refreshing modules in the page editor.
3.0.0	Stardust update
2.1.2	Fixed an issue with CSS rules with multiple selectors not being applied correctly.
2.1.1	Added fix for checking the existence of hover elements
2.1.0	Added Advanced Styling for custom element styling and CSS Animations for creating complex, multi-stage animations.
2.0.1	Removed jQuery dependency