GSAP Animation Guide

Element Map

Selector - [data-name="scramble"]

Animation Behavior - Text scrambles into random characters on hover, then returns to original.

1. Select a text element in Webflow.
2. In Element Settings > Custom Attributes, add data-name as the Attribute and scramble as the Value.

Customizing Key Variables

Find this code in your Gsap Scramble Animation Component and adjust these values:

1<script>
2document.addEventListener('DOMContentLoaded', function() {
3  const scrambleElements = document.querySelectorAll('[data-name="scramble"]');
4  
5  scrambleElements.forEach(el => {
6    const originalText = el.textContent;
7    let scrambleTL = gsap.timeline({ paused: true }); // Timeline starts paused
8    let isPlaying = false;
9    
10    scrambleTL
11      .to(el, {
12        duration: 0.8, // Animation length (seconds)
13        scrambleText: {
14          text: "{original}", // Original text to restore
15          chars: "+?84564XERSHKZN", // Characters used for scrambling
16          speed: 0.5 // Scramble speed (lower = slower)
17        }
18      });
19      
20    el.addEventListener('mouseenter', function() {
21      if (!isPlaying) {
22        isPlaying = true;
23        scrambleTL.restart(); // Plays animation on hover
24      }
25    });
26    
27    scrambleTL.eventCallback("onComplete", () => {
28      isPlaying = false; // Resets animation state
29    });
30  });
31});
32</script>

• Duration: Increase 0.8 to slow down the animation.

• Characters: Replace "+?84564XERSHKZN" with preferred symbols/letters.

• Speed: Reduce 0.5 to make the scramble effect appear slower.

Removing GSAP Animations

1. Remove the Gsap Scramble Animation on the page that contains the above code.
2. Republish your site.

Side effect: Text will no longer animate on hover (static by default).