Scroll Triggered Animations Requirements

  • PHP 5.6 or greater is recommended. It is good practice to update the PHP version before the end-of-life where that version is no longer supported even with security fixes.
  • WordPress 3.0 or greater is recommended. Versions before 3.0 are untested and may have compatibility issues.
  • In wp-config.php define( WP_DEBUG’, false ); If debug displays errors on a live production site animations will not work and other scripts may break.
  • The latest version of the plugin (premium or standard) is highly recommended.
  • Scroll Triggered Animations should work with all themes out of the box but we highly recommend making sure that your theme is updated to the latest version.

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

Updating to a New Version

When updating the plugin always back up your site prior. We test release updates thoroughly but we are humans and sometimes we miss things which can cause errors on your site. Please ensure that you have arecent backup of your site before updating.

Default Animations

Default animations are the all-time go-to for WordPress site managers who don’t know a lot about code. That’s because there a pretty easy thing to get your head around and there is minimum web knowledge needed to implement them.

Simply select a class from the default animations tab and add it to element on your site.

Delaying a default animation

Add a secondary class of delay-*** (along with your chosen animation).

Replace *** with your chosen speed in milliseconds.

Available with premium

Choosing the speed of a default animation

Add a secondary class speed-*** (along with your chosen animation).

Replace *** with your chosen speed in milliseconds.

Available with premium

Advanced Animations

Although slightly more complex than Default Animations. Advanced Animations gives you 100% customizability and a site global scope allowing you to target multiple items.

There are 2 steps to follow to get advanced animations working.

  1. Activate the element
  2. Writing the correct CSS

Activating an element

Activating an element on the plugin is really simple. Add the class, ID, element tag or any other CSS selector to the input field on the advanced animations tab. Once it is activated, you’ll see it appear below the input.

Writing the correct CSS

Writing the CSS is straightforward if you are familiar with CSS3. After activating an element you’ll be able to control the element before and after it enters the viewport. When the element is within your viewport (or is due to animate depending on your options) the element will be given the class ‘scroll-triggered’. With this knowledge and your own knowledge of CSS, you can create an advanced CSS animation.

You can add any animation that you like, there aren’t any restrictions.

A simple version of your CSS could look like this.

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

CSS Transitioning is key to allow a smooth transition between states.

Settings

The Settings tab gives you customizability options that can help you integrate the plugin properly with your own site. All of the customisability options come with a brief description which you can viewing by hovering over the ‘i’ icon on the page.

Add Class on page load

Enable this option to apply animations when the page loads. No scroll movement will be needed for the animations to take place if the item is currently in the viewport when the page loads.

Offset From bottom

A select option which lets you choose the number of pixel from the bottom of the page before the animation will take place. This is useful if your site has a fixed footer and animations are being hidden behind it.

Disable default animations on mobile?

Enable the option to disable default animations on mobile. This won’t work affect your advanced animations.

If you’d like to control your advanced animations on mobile, please write your CSS with media queries.

Repeat after leaving viewport?

Check this option to implement animations more than once. Once enabled, everytime the item enters the viewport the class will be applied and every time the item leaves the viewport it will be removed. This allows for default and advanced animations take place more than once.

Offset From top

Similarly to the ‘Offset From bottom‘ option. This is an option which lets you choose the number of pixel from the top of the viewport before the animation will take place. This is useful if your site has a fixed header and animations are being hidden behind it.

MENU