Pull animation
Create a "pull" CSS animation effect right in the HTML code
Overview
The pull alias pulls the element from its shifted position to its original one. It can be used in the horizontal (pull-{left|right}), or in the vertical (pull-{up|down}) direction, triggered by various events. This is useful for scenarios like promoting buttons on hover or creating reveal animations on inview.
Syntax
Default
The default pull-up and pull-down parameters:
| Name | Start value | End value (default) |
|---|---|---|
pull-up |
0.5rem |
0rem |
| Name | Start value | End value (default) |
|---|---|---|
pull-down |
-0.5rem |
0rem |
The default pull-left and pull-right parameters:
| Name | Start value | End value (default) |
|---|---|---|
pull-left |
-0.5rem |
0rem |
| Name | Start value | End value (default) |
|---|---|---|
pull-right |
0.5rem |
0rem |
Custom values
You can change the initial (starting) value and customize its options.
Examples
These examples show the pull-* alias in action using the hover trigger, but you can use any of the supported triggers.
Default
By default, the pull-* alias will translate the element by 0.5rem in horizontal and vertical direction.
pull-up
The pull-up alias moves the element upward from the bottom, translating it vertically.
pull-down
The pull-down alias moves the element downward from the top, translating it vertically.
pull-left
The pull-left alias moves the element leftward from the right, translating it horizontally.
pull-right
The pull-right alias moves the element rightward from the left, translating it horizontally.
Custom values
Customize the initial value (starting position) of the element by passing the custom value into the alias parenthesis (). In these cases, the custom value is 2rem.
Pull up
The hover:pull-up(2rem) effect sets the initial position to 2rem and translate it upwards to the end value (default) of 0rem on hover.
Pull left
Similar to above, but now the hover:pull-left(2rem) translates the element to the left from its initial value of 2rem.
Combination
You can even combine different pull-* directions.
Options
All property options passed in the <> are supported.