Animate Text is a no-code wrapper for GSAP to easily add award winning text animations to your web project. Animate Text offers multiple customization options on top of it's opinionated animation designs.
animate-text.mp4
https://wb-animate-text.webflow.io/
<script src="https://cdn.jsdelivr.net/gh/learyjk/animate-text@1/dist/wb-animateText.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/learyjk/animate-text@1/dist/wb-animateText.min.css">
Alternatively you could jsut copy/paste the following CSS to your project rather than making another request. This CSS prevent Flash of Unstyled Content (FOUC) on initial page load.
[wb-animate-text],
.char,
.word,
.line {
visibility: hidden;
}
Name =
wb-animate-text
Value =stagger-from-bottom
stagger-from-bottomfade-in-from-leftslide-from-rightbounce-inscale-inblur-inside-elastic-revealrotated-revealskew-up
Yes! There are global customizations and some specific to individual animations. All of these are optional.
Here's a list of customizable properties.
text-divisionstaggerdurationeaserepeatrepeat-delaytrigger-distance-from-bottomyoyo
Name =
text-division
Value =words
Value can be chars, words, or lines.
Default is chars.
Name =
stagger
Value =0.5
Value is a number in second to stagger between each specified text-division.
Default value is different for each animation.
For most animations, the actual duration is controlled by the stagger time.
Name =
duration
Value =2
Value is a number for duration of animation in seconds. Note that most animation durations are controlled by the stagger time. Duration is used for slide-from-right and blur-in.
Default duration depends on the animation.
Name =
ease
Value =power3.out
Specify any ease the GSAP accepts: https://greensock.com/ease-visualizer/
Default ease depends on the animation
Name =
repeat
Value =-1
Specify a number of times for animation to repeat. -1 for infinite repetitions.
Default is 0 (animation plays only once)
Name =
repeat-delay
Value =1
Specify a time in seconds to dleay between each animation repetition.
Default value is 2 seconds.
Name =
trigger-distance-from-bottom
Value =25
Specify a number which represents percent distance from viewport bottom for your animation to trigger. Percentage is relative to the bottom of your element. I.e. if 25 is entered as the value, you should expect your text to animate the bottom of the text is 25% from the bottom of the viewport.
Default value is 10%
Name =
yoyo
Value =true
Determines if the animation should 'yoyo', or 'play in reverse' after playing forward.
Default value is false.