This module is available on these plans: PRO
View Live

SR Animations

SR Animations is the Sprocket Rocket way to easily add animations to your modules
This module is a combination of class or ID selectors, animation types, animation speeds, and easing functions

 

Module Settings

The SR Animations module is an addon module, as such, it is not standalone and works in tandem with the other SR modules. For this documentation, we are going to demonstrate it with the SR Hero 01 module.

 

Hover Animation

This animation triggers when the users cursor is over the module with the selected class or ID.

You can have as many as you want on the page. Each hover animation item has the following settings:

  • Hover Element Selector: In this field, you enter the selector for the element you are targeting to animate on.
  • Animation Type:
    • Scale
    • Bounce
    • Flash
    • Pulse
    • Rubber band
    • Shake
    • Swing
    • Tada
    • Jello
    • Heart Beat
    • Hinge
    • Jack in The Box
    • Custom Animation:
      • CSS on Element
      • CSS on Element Hover
  • Animation Speed: Duration of the animation in ms
  • Easing Functions: You can choose one of these timing functions to animate elements nicely
    • Linear
    • Ease
    • Ease-in
    • Ease-out
    • Ease-in-out

SR Animations Hover

Scroll Animation

This animation triggers when the module within the target selector is in the users viewport.

You can have as many as you want on the page. Each scroll animation item has the following settings:

  • Element Selector
  • Animation Category:
    • Fade
    • Flip
    • Slide
    • Zoom
  • There is a toggle to Show Advanced Options. This gives you more options to tweak the animations to your preference. These settings are:
    • Animate Once: Choose whether the animation should fire once, or every time you scroll up/down to the element.
    • Animation Delay: Delay before the animation starts (in ms)
    • Animation Duration: Duration of the animation (in ms)
    • Trigger Offset: Change value to trigger animations sooner or later (px)
    • Easing Functions: You can choose one of these timing function to animate elements nicely
    • Anchor Placement
    • Anchor Selector

SR Animations Scroll