Scroll Triggered Animations – Animate your site

Description

Scroll Triggered Animations is a highly customisable, yet user-friendly interface for implementing CSS3 animations on scroll throughout your WordPress website.

Whether you’re a highly-skilled web guru, a content editor or you’ve got absolutely no knowledge of web development, we’ve made the animation procedure easy! Activate this plugin on any theme and follow the instructions to animate your website within minutes.

Key points

  • Easiest way within WordPress to implement animations on scroll. Animate any element of your choice.
  • 25+ Preset animations available out of the box. No need to touch any code – simply just add the HTML class and watch the magic happen!
  • Option to make your own CSS3 scroll animations tailored to your website and branding. We’ve taken care of the script, just write your CSS.
  • Create CSS3 animations which work on global scope meaning you can implement 100+ animations with just one line of CSS.
  • No framework is used so you won’t notice a change in performance on your site.

Scroll Triggered Animations is built to allow any WordPress user (developer or not), to implement professional looking animations without any knowledge of javascript. You can choose to use our preset animations from our default animations library, or create your very own CSS3 animation and integrate it with this plugin.

Screenshots

Installation

PHP 5.6 or greater is recommended before installation

  1. Navigate to the plugins menu.
  2. Search for ‘Scroll Triggered Animations’
  3. Click ‘Install Now’ followed by ‘Activate’
  4. You’ll now be able to configure your animations under Settings > Scroll Triggered Animations

FAQ

How do I use my own CSS animations with advanced animations?

The advanced animations tab is for those of you who want that customisability factor. You can animate items on a global scope using your own CSS.

Your first step, is to activate the element you want to animate. You can activate any element by class, id or tag.

The plugin seeks out these items on the frontend of your site and adds the class ‘scroll-triggered’ as it enters your screens dimensions. This gives you the ability to target the element before and after it has entered your screen’s dimensions.

You’re CSS could look something like this:

.button { opacity:0; transform:translateY(10px); transition:all .5s; }
.button.scroll-triggered { opacity:1; transform:translateY(0); }

Just remember to use the transition property to define how long you would like the animation to last.

Find out more here

Why aren’t my animations working?

This could be a number of reasons. The most common issue for this is javascript being broken on your site. Check for a fatal error in the console and if you can’t resolve the issue do not hesitate to contact us via the support forum.

Reviews

July 19, 2019
Been trying to get animations to work with SiteOrigin Pagebuilder for a while. This fixes all of my problems. I know of quite a few forums posts that would love this plugin. Absolutely great.
July 5, 2019
I am really happy with this and the way it can be used it two different ways. targeting own classes, styling transforms with my own css, or just adding the utility classes to the mark-up.
May 18, 2019
Great plugin. Does exactly what it says on the tin. Would recommend!
Read all 3 reviews

Contributors & Developers

“Scroll Triggered Animations – Animate your site” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

2.1.1

*Number of bug fixes and compatibility changes.

2.1.0

*Number of bug fixes
*Christmas styling

2.0.1

  • Number of bug fixes
  • Added more premium features

2.0.0

  • Added ability to control speed on default animations
  • Added ability to control delays on default animations
  • Disable default animations
  • Premium features now available
  • Added more animations to the default animation list.