Text Effect: Izar

How it works

The first step to follow is to clone the Webflow project your can reach by clicking on the button below.

Once the project has been cloned, you have to add the script you find below within your Webflow project (before "body" tag in the page you want to show it).

<script src="https://cdn.jsdelivr.net/npm/[email protected]/udesly-text-effect-izar.bundle.js"></script>

Insert a text element with the attribute:

Default duration is 1200ms.

To separate phrases from each other, they must be separated by vertical bar (|)

Loop

To enable loop, insert the attribute:

Easing Duration

This is easing duration before phrases change. Insert the attribute:

Best practice: If you’re going to insert the animation effect on the very first section of the page (the Hero), it would be better to set it to “display none”, in order to avoid annoying flicker. All the other sections do not need this foresight.

How to add a custom attribute

  1. Select the element you want to add the custom attribute to

  2. Go to the Element settings Panel (D)

  3. Add [+] a custom attribute

  4. Specify the name and the value

  5. Click Save

White Arrow
For example:
In this case you defined the Facebook Post
udesly-logo
Made with Udesly