Hello Sunil
text-reveal-animations-on-scroll-feature-image

Text Reveal Animations On Scroll – Textify.js

Have you ever wanted to impress your users with text animations?

Textify.js is a fast and highly customizable open-source library for creating text reveal animations triggered by scroll. This can be used for displaying instructions, tips, or just about anything else you want to show on scroll.

Textify.js is a simple library that works with scroll-base animations, and user can use any scrolling libraries likes locomotive-scroll, smoothscroll, etc. All libraries are compatible with Textify.js.

How to Use Textify.js

Step 1: You can install Textify.js in three ways:

Using package manager (NPM)

npm install textify.js

Using CDN

<link src="https://cdn.jsdelivr.net/npm/textify.js/dist/Textify.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/textify.js/dist/Textify.min.js"></script>

ES6 Module

<script type="module">
    import textifyJs from 'https://cdn.jsdelivr.net/npm/textify.js/+esm';

    const { Textify } = textifyJs;

    new Textify();
</script>

Step 2: Add the data-textify attribute to the text to be animated on scroll.

<h1 data-textify>
  Hello Sunil!
</h1>

By default textify use default configurations for text animations. You can pass an configuration object during initialization to tweak it.

Step 3: Then apply an easing function to the text animation via JavaScript.

const example = new Textify({
      selector: ".selector",
      easing: "back",
});

Step 4: Finally, config the text reveal animation.

const example = new Textify({
  
      selector: ".selector",
      // easing function
      easing: "Default",
      // fade easing
      fadeEasing: 'Default'
      // duration in ms
      duration: 1450,
      // delay in ms
      delay: 100,
      // enable fade animation
      fade: false For fade animation.
      // Text reveal direction
      // false = bottom to top
      top: false,
      // whether animation should happen only once
      once: true,
      // add rotation on words
      rotation: 0,
      // add scaling on words
      scale: 1,
      // default selector
      selector: 'data-textify',
});

Example:

See the Pen Text Reveal Animations On Scroll – Textify.js by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 4

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Similar articles you may like

Sunil Pradhan

Hi there 👋 I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.

Add comment

Stay Updated

Want to be notified when our article is published? Enter your email address below to be the first to know.

Sunil Pradhan

Hi there 👋 I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.