data-ix-MouseOver
MouseOver
Summary
This solution allows you to create create parallax animations where elements move or rotate based on mouse/touch position. This can create fun and dynamic effects for hero sections or CTA's. It's incredibly flexible as you get control over what properties are controlled by moving over what axis.
01
Prefix
As with all attributes in this library all attributes in used when implementing this solution start with the following prefix: if you see the tag {prefix} used on this page it refers to the following prefix:
02
Elements
The scrolling solution relies on two core layers of divs in order to function, with an optional third element that can be used for more precise control over the mouseover target area.
Attribute Name
Value
Default
Description
data-ix-mouseover=wrap
wrap
boolean
This is the outermost element of the solution that will hold any layer elements within it. By default this will be used as the target area for the mouseover interaction.
data-ix-mouseover=layer
wrap
boolean
This is the element that will be transformed during the animation. Since there is no 'default' animation to make this solution more flexible you will need to apply attributes to define what properties you are updating over the mouseover animation. There can be multiple layer elements inside each wrap.
data-ix-mouseover=trigger
wrap
boolean
This is an optional element inside the wrap that you can use to have more specific control over the target areas of the mouseover animation. If this element is inside the wrap it will be used as the trigger, otherwise the wrap will be used.
03
Options
Since this solution does not have a default interaction it relies much more heavily on option attributes. The first list of options will be applied to the wrap element, and the second list must be applied to a layer element.
FOR WRAPS
Attribute Name
Value
Default
Description
{prefix}-duration
number
0.5
The duration it takes for the animation to happen on movement
{prefix}-ease
string
power1.out
The GSAP ease used for layers in the timeline be default.
FOR LAYERS
Each attribute for a layer defines what axis you are wanting to animate on and what property to animate so x-rotate-y means the y rotation will animate based on the position of the mouse on the x axis. By default each property will animate from a negative value (of the supplied number) to a positive one, but if you put a - at the beginning of the attribute value, those will be switched.
For example: an x-move-x of 20rem will transform the layer from -20rem when the cursor is on the left side of the trigger element to 20rem when it is on the right side, if you were to change the value to -20rem the values would be reversed.
X axis defaults from left to right. Y axis defaults from top to bottom.
Attribute Name
Value
Default
Description
{prefix}-x-move-x
string
null
Will animate the x position of this layer when the mouse moves on the x axis. Use percent, vw, or rem based values.
{prefix}-x-move-y
string
null
Will animate the y position of this layer when the mouse moves on the x axis. Use percent, vw, or rem based values.
{prefix}-y-move-x
string
null
Will animate the x position of this layer when the mouse moves on the y axis. Use percent, vw, or rem based values.
{prefix}-y-move-y
string
null
Will animate the y position of this layer when the mouse moves on the y axis. Use percent, vw, or rem based values.
{prefix}-x-rotate-x
number
null
Will animate the x rotation of this layer when the mouse moves on the x axis. Use a number of degrees.
{prefix}-x-rotate-y
number
null
Will animate the y rotation of this layer when the mouse moves on the x axis. Use a number of degrees.
{prefix}-x-rotate-z
number
null
Will animate the z rotation of this layer when the mouse moves on the x axis. Use a number of degrees.
{prefix}-y-rotate-x
number
null
Will animate the x rotation of this layer when the mouse moves on the y axis. Use a number of degrees.
{prefix}-y-rotate-y
number
null
Will animate the y rotation of this layer when the mouse moves on the y axis. Use a number of degrees.
{prefix}-y-rotate-z
number
null
Will animate the z rotation of this layer when the mouse moves on the y axis. Use a number of degrees.
