SR Animations

This module is available on these plans: PRO
SR Animations View Live

Scroll Animations

SR Animations is a versatile and user-friendly animation module designed to enhance web pages with dynamic, engaging visual effects. It provides a robust set of tools for creating scroll-triggered animations, hover effects, and advanced styling without requiring extensive coding knowledge.

Element Selector

  • Use standard CSS selectors
  • Examples:
    • #hero-image for a specific ID
    • .product-card for all elements with a class
    • section > h2 for all h2 elements that are direct children of section elements

Animation Categories and Options

  1. Fade

    • Options: Fade, Fade Up, Fade Down, Fade Left, Fade Right, Fade Up Right, Fade Up Left, Fade Down Right, Fade Down Left
    • Best for: Subtle introductions of content, especially text or images

  2. Flip

    • Options: Flip Up, Flip Down, Flip Left, Flip Right
    • Best for: Attention-grabbing animations, especially for cards or images

  3. Slide

    • Options: Slide Up, Slide Down, Slide Left, Slide Right
    • Best for: Moving elements into place, like sidebars or notification banners

  4. Zoom

    • Options: Zoom In, Zoom In Up, Zoom In Down, Zoom In Left, Zoom In Right, Zoom Out, Zoom Out Up, Zoom Out Down, Zoom Out Left, Zoom Out Right
    • Best for: Emphasizing important elements or creating a sense of depth

Start Hidden

When enabled:

  • Elements are initially invisible
  • Prevents the "flash of unstyled content" before animations trigger
  • Recommended for most scroll animations

Advanced Options

  1. Animate Once

    • When checked: Animation occurs only the first time an element enters the viewport
    • When unchecked: Animation repeats each time the element enters the viewport
    • Use case: Check for one-time reveals, uncheck for repeated animations (e.g., parallax effects)

  2. Animation Delay

    • Range: 0 to 10000 milliseconds
    • Use case: Create staggered animations by setting different delays for multiple elements

  3. Animation Duration

    • Range: 50 to 3000 milliseconds
    • Tip: Shorter durations (300-500ms) often feel snappier, while longer durations can feel more dramatic

  4. Trigger Offset

    • Range: 0 to 1000 pixels
    • Adjusts when the animation starts relative to the viewport edge
    • Larger values trigger animations earlier (before the element fully enters the viewport)

  5. Easing Functions

    • Options include: linear, ease, ease-in, ease-out, ease-in-out, and various specialized functions
    • Tip: "ease-out" often looks natural for entrances, "ease-in" for exits

  6. Anchor Placement

    • Determines which part of the element and viewport are used as reference points
    • Options: top-bottom, top-center, top-top, center-bottom, center-center, center-top, bottom-bottom, bottom-center, bottom-top
    • Example: "top-center" triggers when the top of the element reaches the center of the viewport

  7. Anchor Selector

    • Allows a different element to act as the trigger
    • Use case: Animate a child element based on its parent's position in the viewport

Hover Animations

Hover animations add interactivity to elements when users hover over them with their cursor.

Animation Types

  • Scale: Grows or shrinks the element
  • Bounce, Flash, Pulse, etc.: Predefined animated effects
  • Custom: Allows for complete CSS customization

Scale Amount

  • Range: 1 to 9
  • A value of 1 means no scaling, 2 means double size, 0.5 means half size, etc.

Animation Speed

  • Controls how quickly the hover effect applies and reverses
  • Faster speeds (300-500ms) feel more responsive, slower speeds can create a sense of weight

Easing Functions for Hover

  • Similar to scroll animations, but typically with fewer options for simplicity
  • "ease-in-out" is often a good default for hover effects

Advanced Styling

This powerful section allows for complex, multi-stage animations and general styling of elements.

Types of Style Application

  1. Default: Styles applied constantly
  2. On Hover: Styles applied when the user hovers over the element
  3. Scroll in View: Styles applied when the element enters the viewport

Styles Settings

  • Duration: How long the transition between states takes
  • Delay: Time before the transition starts
  • Animate Out: For scroll animations, determines if the element animates back to its original state when leaving the viewport

Available Style Properties

  • Opacity: Adjust transparency (0-100%)
  • Position: Set X and Y coordinates (supports various units like px, %, rem, em, vw, vh)
  • Scale: Resize the element (percentage of original size)
  • Rotate: Rotate the element (0-360 degrees)
  • Background Color: Choose from preset colors or use a custom color picker
  • Text Color: Set the color of text within the element
  • Border: Customize border radius
  • Shadow: Add and customize box shadows

CSS Animations

Keyframes allow you to define the stages of an animation, specifying how an element should look at various points during the animation sequence. This gives you precise control over the animation's progression.

  • Keyframes: Define multiple stages of your animation
    • Set percentage points (0-100%) for each keyframe
    • Adjust properties like opacity, position, scale, and rotation at each stage
  • Delay: Set a delay before the animation starts
  • Duration: Define how long one cycle of the animation takes
  • Iterations: Set how many times the animation should repeat (0 for infinite)

Understanding Keyframes

  • Keyframes represent specific points in an animation sequence.
  • Each keyframe can define different style properties for the element.
  • The animation will smoothly transition between these keyframes.

Keyframe Configuration

For each keyframe in your animation, you can set the following properties:

  1. Keyframe Percentage (0-100%)

    • Represents when in the animation sequence this keyframe occurs.
    • 0% is the start of the animation, 100% is the end.
    • You can add multiple keyframes at different percentage points.

  2. Opacity (0-100%)

    • Controls the element's transparency at this keyframe.
    • 0% is completely transparent, 100% is fully opaque.

  3. Position X and Y

    • Sets the horizontal (X) and vertical (Y) position of the element.
    • Accepts various CSS units (px, %, rem, em, vw, vh, etc.).
    • Example: "20px" moves 20 pixels, "50%" moves half the parent container's width/height.

  4. Scale

    • Adjusts the size of the element relative to its original size.
    • 100% is the original size, 200% is double, 50% is half, etc.

  5. Rotate (0-360 degrees)

    • Specifies the rotation of the element at this keyframe.
    • Positive values rotate clockwise, negative values rotate counterclockwise.

Creating an Animation Sequence

  1. Add multiple keyframes to create a complete animation sequence.
  2. Set different properties for each keyframe to define how the element changes over time.
  3. The animation will interpolate between keyframes, creating smooth transitions.

Example: Creating a Complex Animation

Let's create a sample animation that combines multiple effects:

  1. Starting keyframe (0%)

    • Opacity: 0%
    • Position X: "-50px"
    • Position Y: "0px"
    • Scale: 50%
    • Rotate: 0 degrees

  2. Midpoint keyframe (50%)

    • Opacity: 100%
    • Position X: "0px"
    • Position Y: "-20px"
    • Scale: 120%
    • Rotate: 180 degrees

  3. Ending keyframe (100%)

    • Opacity: 100%
    • Position X: "0px"
    • Position Y: "0px"
    • Scale: 100%
    • Rotate: 360 degrees

This animation will start with the element invisible, small, and offset to the left. It will then fade in, grow, move up, and rotate as it reaches the midpoint. Finally, it will settle back to its original position and size after a full rotation.

Animation Settings

After defining your keyframes, configure these additional settings:

  1. Delay

    • Set a delay (in seconds) before the animation starts.
    • Useful for creating staggered animations with multiple elements.

  2. Duration

    • Specify how long (in seconds) one complete cycle of the animation takes.
    • This determines how quickly the animation progresses through the keyframes.

  3. Iterations

    • Set how many times the animation should repeat.
    • Use 0 for an infinite loop, or any positive number for a specific count.