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).
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
-
Select the element you want to add the custom attribute to
-
Go to the Element settings Panel (D)
-
Add [+] a custom attribute
-
Specify the name and the value
-
Click Save
