Use the SR Animations module
Add scroll and hover animations to page content.
SR Animations shows nothing on the page itself. It animates other elements, which you target with a CSS selector.
- Give the element you want to animate an ID or Class in its module settings, or find an existing class on it.
- Add SR Animations to the page.
- Under Scroll Animation, enter that selector in Element Selector, such as
#pricingor.my-class. Choose an Animation Category (Fade, Flip, Slide, or Zoom) and an animation. - For an effect on mouse-over, use Hover Animation and its Hover Element Selector. Advanced Styling applies custom styles and keyframe animations to a selector.
Keep motion short and avoid applying it to every section. Disable Scroll Animations On Mobile turns scroll animations off on screens narrower than 992 pixels, which includes most tablets. The module does not check the visitor's reduced-motion preference.
Start Hidden hides the element until the animation script sets it up. With Disable Scroll Animations On Mobile on, it hides the element only on wider screens, where the animation runs. If an element stays hidden on smaller screens, update SR Animations to version 3.0.2 or later. Preview the published page at each screen size and confirm all content appears.