"Pause Animations" Button for Visitors
Adds a floating button that lets any visitor stop animations, transitions and autoplaying videos on the site. The choice is remembered on their device.
Snippet Library
WordPress code snippets, ready to use
3,040 free snippets from the WPIDE team and the community. Copy the code, or add any snippet to your site in one click with WPIDE.
Animated Gradient Background Class
Adds a "wpide-animated-gradient" class that gives any Group or Cover block a slowly shifting multi-color gradient background, for eye-catching hero and CTA sections.
Animated Number Counter Shortcode
Adds a [wpide_counter to="2500" suffix="+"] shortcode that counts up from zero when the number scrolls into view, for statistics and milestones.
Bouncing "Scroll Down" Arrow on Hero Sections
Adds a gently bouncing arrow to the bottom of any Cover block with the class "wpide-scroll-hint", inviting visitors to scroll past a full-screen hero.
Fade In Images as They Load
Makes content images fade in smoothly when they finish loading instead of popping in, for a more polished feel.
Fade-In Page Transitions
Fades each page in as it loads and gently out when visitors follow a link to another page on your site. Turned off for people who prefer reduced motion, and pages never stay hidden if JavaScript fails.
Marker-Pen Animation for Highlighted Text
Animates highlighted text (the <mark> tag from the toolbar's Highlight option) with a marker stroke that sweeps across as the words scroll into view.
Pause Animated GIFs Until Clicked
Shows the first frame of every animated GIF in your content with a play button, and only plays the animation when the visitor clicks, so moving images never start on their own.
Respect "Reduce Motion" Across the Whole Site
Turns off CSS animations, transitions, parallax backgrounds and smooth scrolling for visitors whose device is set to reduce motion. Visitors without that setting see no change.
Respect "Reduce Motion" in Divi Animations
Turns off Divi's entrance animations, parallax and scroll effects for visitors whose device asks for reduced motion, while everyone else keeps the effects.
Respect "Reduce Motion" in Elementor Animations
Shows Elementor content right away without entrance animations, motion effects or background slideshows for visitors whose device asks for reduced motion.
Reveal Blocks on Scroll
Fades and slides content blocks into view as the visitor scrolls. Add the class "reveal" to any block in the editor (Advanced > Additional CSS class) to animate it.
Scrolling Logo Strip (Marquee)
Turns any block with the class "wpide-marquee" (a Gallery, Row or Group of logos) into a smooth, endlessly scrolling strip that pauses on hover.
Slow Zoom (Ken Burns) Effect for Cover Images
Adds a slow, cinematic zoom to the background image of any Cover block with the class "wpide-ken-burns", for more lively hero sections without video.
Smooth Open and Close Animation for Details Blocks
Animates Details (accordion) blocks so the answer slides open and closed smoothly instead of jumping, in browsers that support animating to auto height.
Subtle Parallax Effect for Images
Gives images inside blocks with the class "wpide-parallax" a gentle parallax movement while scrolling, adding depth to hero and feature sections.
Turn Off the Login Form Shake
Stops the login box from shaking after a wrong password, for a calmer login screen.
Typing Text Effect Shortcode
Adds a [wpide_typing words="faster|safer|simpler"] shortcode that types and deletes each word in turn, for lively hero headlines like "Make your site faster".