Element Animations

We've added a few classes so that users can add a bit of animations to elements on their sites. The animations fall into two main groups: hover animation and view animations. View animations are activated when elements are scrolled into view.

Hover Animation

The main animation for hover is a floating effect using shadows. Adding the class onHoverFloat will trigger this effect on an element. As with all animations, this should be used sparingly and consistently across a site. It's great for news or nav cards that use the BS4 stretched-link, or other image-link type elements. Elements must not be inline.

View Animations

All of the view animations follow a naming pattern that describes where the element is before it is scrolled into view. The pattern for the class is beforeScroll[Position] where position describes the location. All animated elements must have the onScrollRevert class. The down position can be paried with left or right for a diagonal effect.

Visibility

The onScrollInvisible class will fade in the elenment on scroll and can be paried with any of the position classes.

Pairing with Hover

Because timing is different between the hover animation and the view animations, if you need to pair them, wrap the hovered element in the animated view element.

Animation of Sub Elements

You can optionally animate interior elements at a slightly different speed than the main element with the onScrollSub class. This can be useful for a colored block and text. The text can enter at slightly a different speed than the containing block, giving a layered effect and providing additional depth to the page. This also allowed you to set the opacity independently on the sub element.

Potential Issues

1. Because these animations rely on CSS translations and transitions for performance reasons, there can be unexpected effects when paired with non-static elements or other unknown CSS properties. It's important to test when using. Often times, if something isn't acting correctly, using a wrapper for the animated element fixes issues.
2. Horizontal animations may start their position outside the bounds of the window depending on their location on the page and screen width. This can result in horizontal scrolling on phones or smaller devices. For this reason, it is best practice to use the overflow-hidden class on a wrapper element to prevent the item from causing horizontal scrolling prior to coming into view.