Instructions

How to Edit
GSAP Animations

Element Map

This template includes a GSAP animation that cycles through a list of words (faster, smarter, together) inside the element with the ID #animated-text. It also animates a blinking cursor #cursor to create a typing-like effect.
‍
#animated-text: The text content changes dynamically between different words.
#cursor: The cursor blinks continuously, simulating typing.

Customizing Key Variables

Here’s how to modify the main GSAP animation variables in the provided code:

Word List : Controls which words cycle through the animation.
- Example: const words = ["faster ", "smarter ", "together "];
- To add or change words, modify the array. ( e.g., const words = ["innovative ", "secure ", "scalable "]; ).
Cursor Blink : The cursor opacity is animated to create a blinking effect.
- Example: duration: 0.5
- Smaller values = faster blink.
- Larger values = slower blink.
Ease : Defines the timing of the cursor blink.
- Example: ease: "power2.inOut"
- You can replace with other GSAP easing functions (e.g., "linear" for constant speed).
Text Animation Duration: Controls how quickly each word appears.
- Example: tlText.to("#animated-text", { duration: 0.7, text: word });
- Change 0.7 to a higher number for slower typing or a smaller number for faster typing.
Repeat and Delay :
- repeat: -1 → infinite looping.
- yoyo: true → plays forward then reverses (so text disappears).
- repeatDelay: 1 → wait time before switching to the next word.

Removing GSAP Animations

If you wish to disable or remove the animation, follow these steps:

Disable Animation: Comment out or remove the GSAP animation code.

/* <script>
const words = ["faster ","smarter ", "together "];

gsap.to("#cursor", {
  opacity: 0,
  repeat: -1,
  yoyo: true,
  duration: 0.5,
  ease: "power2.inOut"
});

let tlMaster = gsap.timeline({ repeat: -1 });

words.forEach((word) => {
  let tlText = gsap.timeline({ repeat: 1, yoyo: true, repeatDelay: 1 });
  tlText.to("#animated-text", { duration: .7, text: word });
  tlMaster.add(tlText);
});
</script> */

Webflow Settings - GSAP Toggle: To remove the GSAP animation from the Webflow Designer:
1. Go to the Settings panel in Webflow Designer.
2. Find the GSAP options section.
3. Deselect the TextPlugin or cursor animation toggles.
4. After turning off the animations you want to remove, save the changes.

Save & Republish: After removing or commenting out the code, save your changes and republish your Webflow project.

Example Code Block

Here’s the complete code snippet for easy reference: