This script uses GSAP to create a blinking cursor and a looping text animation that cycles through an array of words. Below is a detailed explanation of how it works and how you can modify it.
In Webflow, this script should be placed on the current page in the “Before </body>” custom code section.
Step 1: Open the Page Settings of the page you want to add the animation to.
Step 2: Scroll down to the Custom Code section.
Step 3: Locate the “Before </body> tag” field.
Step 4: Paste your GSAP library scripts and custom animation script here.
Step 5: Save and publish the page.
Note: Placing the script here ensures that all HTML elements (like #animated-text and #hero-cursor) are fully loaded before the animation starts.
Purpose: This array stores all the words or phrases that will appear in your animated text.
Replace the strings with your own words, e.g., ["music vibes", "creative sound", "studio magic"].
You can add or remove words. More words = longer loop.
Each word must be inside quotes "" and separated by commas.
.webp)
Note: This part of the script creates the blinking cursor effect next to the animated text, making the typing animation feel more natural and similar to a real typing indicator.It continuously changes the opacity of the cursor element (#hero-cursor) from visible to invisible, creating a smooth blinking loop while the text animation is running.
#hero-cursor – This targets the HTML element that represents your blinking cursor.
Make sure your cursor element has the ID hero-cursor.
opacity: 0 – Makes the cursor fade out to invisible.
repeat: -1 – Loops the animation indefinitely. -1 means infinite repetition.
yoyo: true – Makes the animation reverse each time it completes. This creates a blinking effect (fade out → fade in → repeat).
duration: 0.5 – Controls how fast the cursor fades in and out. Smaller values = faster blink.
ease: "power2.inOut" – Defines the easing of the animation. "power2.inOut" makes the fade smooth, not abrupt. You can try other easings like "linear", "power1.inOut", or "elastic.inOut" for different effects.
Note: Creates a timeline that controls all the text animations together.
repeat: -1 – Makes the entire sequence loop infinitely. You can set a number instead of -1 to repeat a fixed number of times.
Why use a master timeline: This allows you to add multiple smaller timelines (one per word) and control the sequence as a single loop.
.webp)
Faster cursor blink (duration: 0.4)
Linear cursor easing (ease: "linear")
Slightly faster word animation (duration: 2)
Slightly faster word animation (duration: 2)
In Webflow, this script should be placed on the current page in the “Before </body>” custom code section.
words → array of text phrases. Customize freely.
#hero-cursor → blinking cursor. Adjust duration and ease for blink style.
tlMaster → master timeline, controls looping sequence.
tlText → timeline per word. Adjust duration and delay for animation speed.
Use TextPlugin for word animation.
HTML must have #animated-text and #hero-cursor elements.
Looping and delays can be customized for rhythm and pacing.
