Animated Page Transitions

version 1.0

last updated 09/22/2016

Requirements: Concrete5 version 5.7.5.1 (or newer)

'Animated Page Transitions' for Concrete5 brings animated page transitions to your website with the click of a button. It offers a range of transitions to choose from to animate pages in and out whenever your website is navigated.

If you're looking for a live example, surf around our website and see the pages animate in and out!

To see the variety of animations available watch the screencast.

Introduction

Enabling smooth transitions from one page to another when navigating your site has never been easier! With concrete5 and the 'Animated Page Transitions' plugin, all you have to do is install it and your in business!

The default transition is to simply fade pages in and out, but there's many more transitions you can choose from. You may even mix them up, having pages animate in one way, and animate out another.

Additionally, there is overlay mode, which causes an animated overlay to slide in or out from whatever direction you decide. You can choose what color to use for the overlay from the settings page.

Settings

The settings page is more simple than ever. From the dashboard there is the following settings:

1. 'Enable or disable' the plugin without needing to uninstall (even if you do, your settings will persist)
2. 'In Transition' - Choose the transition type to use when animating a page in.
3. 'Out Transition' - Choose the transition type to use when animating a page out.
4. 'Overlay Color' - When you select an Overlay transition type, a forth option will appear that lets you decide on what color to use for the screen overlay. (note that for overlay mode to work correctly you must select some kind of Overlay transition for both in and out page transitions.

UPDATE (09/23/2016) - We've added the ability to control the animation times as well. The two sliders on the settings page now allow you to modify the animation times. Make them fast or slow depending on your taste.

Save your settings and that's it. Navigate away from the dashboard page and click around your site to see your new page transitions in action!

'Animated Page Transitions' for concrete5 is similar to LiquidFire for Ember.js. It gives your visitors a wonderful experience by causing a smooth transition to occur when changing pages on your site instead of just flashing into the next page.

We've gone the additional mile to ensure visitors don't experience screen flash ( the screen going blank for a split second while a new page loads) to ensure the animations are seamless.

With smooth page transitions like these, people might just think your website was coded in Node...
...but of course, you can let 'em know its concrete5!