Animation – Hover Interactions

Hover Interactions

Hover animations are a great interactive element to add to your website. Hover animations are not only visual appealing but serve a purpose too. A hover animation can also be used to show indicate to the viewer that an elements is clickable or reveal additional information.

Background Animations

The use of background image animations will reinforce dark oninous feeling given off by the Chiller brand. These animations are ideal for tile backgrounds or hero graphics. Background animations should will be subtle additions to strong imagery.

Destination Truth

Search for The Unexplained

grid01

Destination Truth

Search for The Unexplained

grid01

Destination Truth

Search for The Unexplained

grid03

Destination Truth

Search for The Unexplained

grid03

Destination Truth

Search for The Unexplained

grid04

Destination Truth

Search for The Unexplained

grid04

Destination Truth

Search for The Unexplained

grid02

Tilt Effect Example 4 Without Transition

Destination Truth

Search for The Unexplained

grid02

Tilt Effect Example 4 With Transition - Selected for Chiller

Destination Truth

Search for The Unexplained

grid01

Shiver Effect Example 1

Destination Truth

Search for The Unexplained

grid01

Shiver Effect Example 2

Destination Truth

Search for The Unexplained

grid01

Shiver Effect Example 3

Reveals

Reveal animations provide viewers with a visual appealing way to show or hide more information. These animations are ideal to show a quick synopsis for an episode or photo.

Sarah Bennett
Sarah Bennett was, quite literally, cut out of her pregnant mother’s belly.
Learn more

Flip Example

Dylan Bennett
Dylan is the rock that his wife Sarah can depend on whenever things get a hectic, emotional, or even a little murdery.

Corner Slice Example

Cam Henry
Cam’s father Alan, was at the Bennett house when Sarah’s parents were murdered by the Executioner.
Learn more
Cam Henry
Cam’s father Alan, was at the Bennett house when Sarah’s parents were murdered by the Executioner.
Learn more

Center Slice Example - Selected for Chiller

Sarah Bennett
Sarah Bennett was, quite literally, cut out of her pregnant mother’s belly.
Learn more

Flip Example

Dylan Bennett
Dylan is the rock that his wife Sarah can depend on whenever things get a hectic, emotional, or even a little murdery.

Corner Slice Example

Cam Henry
Cam’s father Alan, was at the Bennett house when Sarah’s parents were murdered by the Executioner.
Learn more
Cam Henry
Cam’s father Alan, was at the Bennett house when Sarah’s parents were murdered by the Executioner.
Learn more

Center Slice Example

Text Animations

Similar to background animations, subtle text and logos animations can be used to make the viewer aware they have hovered over an actionable item. For ChillerTV.com the slice animation is subtle and consistent with Chiller branding.

Slasher

Buttons

Similarly to the tile press, the buttons will have the same press animation.

Ghost to Solid Corner Slice Button - Selected for
Chiller

Red & White Corner Slice Ghost Button Sample -
Selected for Chiller

All Red Corner Slice Ghost Button Sample

Shiver Button Example