Scroll Triggered Animations

Installation

  • 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 (pro and foundation) 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.

Plugin Configuration

The Animation Hub gives you customizability options that can help you integrate the plugin properly with your own site. The settings under this area have a global effect and will affect all of your animations throughout the site.

Disable ALL animations

Enable the option to disable all animations on your site essentially disabling the plugin temporarily. Useful for debugging the site.

Play animations 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.

Repeat animations

Enable this option to implement animations more than once per page load. Once enabled, every time the element enters the viewport the element will animate, likewise when the element leaves the viewport, the element will have the reverse effect.

Animation start position

This option lets you choose the number of pixels from the bottom (and top) of the viewport before the animation will take place.

This has many different uses but can come in handy when you have a fixed header or footer.

Quick and Easy Animations

Quick & Easy 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 minimal web knowledge needed to implement them.

Simply select a class from the default animations tab and add it to any element on your site. You can do this via the wordpress editor, insert it within your theme files or use any of the tool your theme or page builder offers.

A full list of Quick & Easy animations can be seen within the Quick & Easy Animations Tab.

Delays - Quick & Easy animation

Adding a delay to your animation can be useful for many different reasons and that’s why we made it really easy to apply one to your Easy animations.

Add a secondary class of delay-*** (replacing *** with your chosen speed in milliseconds).

Note: You will still need to apply the Easy animation as normal adding the first class, you’ll then need to leave a blank space and apply the delay-*** class.

Speed - Quick & Easy Animations

Amending the speed to your animation is also very important.

To do this you can add a secondary class of speed-*** (replacing *** with your chosen speed in milliseconds).

Note: You will still need to apply the Easy animation as normal adding the first class, you’ll then need to leave a blank space and apply the speed-*** class.

Custom Animations

Custom Animations are a more complex setup than Quick & Easy Animations however Custom Animations give you 100% customizability and a global scope allowing you to target multiple elements with a few line of CSS.

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

  1. Activating elements
  2. Writing your own CSS animations

Activating elements

Activating elements is a pretty straightforward process and can be done within the Custom Animations tab.

Activate an element by inserting its Class, ID, element tag to the input field within the tab and click “Activate Element” under the tab. Once it is activated, you’ll see it appear below the input field.

 

Writing your own CSS animations

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 (based on your configured settings). This is because, when it is due to animate (based on your configured settings) a CSS class will be added to the element. The class added is “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.

Menu