Parameter
Type
Default
Description
target
string
The Target is the most important parameter of this function. It defines to which element this animation should apply to. Elements can be targeted by their id like this
#yourElement or by their class like this
.your-element. For more complex selection it's also possible to use the full scope of CSS Selectors. You can find a list of all CSS Selectors here:
w3schools.com/cssref/css_selectors.asprepeat
boolean
true
Defines whether or not the animation should be restarted once the element gets out of view.
transitionSpeed
number
1
Speed of the transition of each letter (or word) from being out of view to being in the final position. This value is defined in seconds.
intervalSpeed
number
50
Delay between starting the transition of each letter (or word). The lower the number the faster the total transition time would be. This value is defined in milliseconds.
selection
string
"character"
Defines how the elements are grouped together during the transition. The values available are "character" or "word".
offsetShow
number
0
The transition usually starts to play once the element is entering the viewport. You can add an offset to this moment by increasing the offsetShow value. That way you can make sure, that the animation only starts playing once more of it is actually in view. This value is defined in pixels.
offsetHide
number
0
The transition usually gets reset once the element is fully outside of the viewport. You can add an offset to this moment by increasing the offsetHide value. This value is defined in pixels.
transition
string
"ease out Quint"
Set a custom transition for the characters (or words) to appear by. You can use the value "bounce" to quickly get a bounce transition or set your own values formated like this: cubic-bezier(.23, 1, .32, 1)
overflow
string
"hidden"
By changing the overflow parameter to "visible" you can achieve a very different animation. Be sure to pair this Parameter with an "initialOpacity" of "0" so that the characters (or words) don't just move up without being out of you in any way.
initialOpacity
string
"1"
Change the initial opacity to have an extra bit of transition. Try to pair this Parameter with "overflow:visible" to achieve a new style of transition effect.
initialPosition
string/number
"auto"
By default the initial position gets calculated for the character (or word) to be exactly out of view. Change this parameter to set this the out of view position to what you prefer. This value is defined in pixels.
customLineHeight
string
By default Text Reveal 2.0 adds the the line-height set in the text field converted to pixel. If you want to use a different unit like vh or em you have to manually set the value with this parameter. Possible values could be "50vh", "1.1" or "1.6em". Attention: Always set the Attribute as a string.
direction
string
"vertical"
Change the direction of the letters or words moving into view by modifiying the direction parameter. Options are "vertical" and "horizontal". This parameter works best when used with a letter by letter reveal selected (default).
charClass
string
To customize the animation even further you can add a custom class to each character or word by using this parameter.
charHiddenClass
string
Add a class which is added to each character or word on it's hidden state to customize the animation with custom css.
