(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Introduction – Scramble Text Reveal with Elementor & GSAP
In this tutorial, we will learn to different scramble effects that we can do using GSAP in Elementor.
Switch this:
document.addEventListener("DOMContentLoaded", () => {
to:
window.addEventListener("load", (event) => {
If the text is not revealing when reaching viewport.
The first code runs the code only when HTML is loaded, the second only runs the code when whole website is loaded(images, videos etc).
Reveals Automatically
From Empty or Original Text Option
Default: Reveal 90% at viewport location
1 – Reveal automatically from Empty Text or Original Text
- dm-scramble-text is the CSS class of the Heading widget. (For Elementor v4, this code will require some change. I’ll provide the changes when v4 becomes stable)
- You can change chars to any letters you want. This letters are shown when doing scramble. Some predefined options are – upperCase, lowerCase, upperAndLowerCase. (Example: in chars:”lowerCase” would show all letters from A to Z in lowercase when scrambling)
- revealDelay defines how much time it should scramble before starting the reveal process.
- speed defines how quickly should the scramble text switch.
- start: ‘top 90%” – 90% here defines at which location in viewport should the animation start. Example: if you set 50%, then the reveal will only start when the text reaches center of your viewport.
- delimiter allows you to reveal char by char OR word by word. For word by word, simply add space – ” “.
- duration is how much time should it take to reveal. Make sure your revealDelay is lower that duration.
- There are 2 text, one in from(Line 30) and one in to(Line 42). The from text defines from which text it should start with, and to text defines which text to show after scramble. In below code, the from text is empty which means no text would be shown before scrambling, the to text is set to a variable which stores our original text. (This is simply to make it easier to Elementor to work with and it is also just because of GSAP scramble works).
- If you type text: “{original}” at line 30, then it will show the original text already, then scramble and show the original text again.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrollTrigger.min.js" integrity="sha512-P2IDYZfqSwjcSjX0BKeNhwRUH8zRPGlgcWl5n6gBLzdi4Y5/0O4zaXrtO4K9TZK6Hn1BenYpKowuCavNandERg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrambleTextPlugin.min.js" integrity="sha512-EVIYaMR2tIn6veV5jmP0M0DFBSBt5rAhRPsW0zwC9LyPzAIHNeWiZ4B5orgYeWbNq55vIwk8fOKCtTHwiCBvaw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-scramble-text {
transition: none !important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(ScrambleTextPlugin, ScrollTrigger);
const scrambleEls = document.querySelectorAll('.dm-scramble-text .elementor-heading-title');
scrambleEls.forEach(el => {
const originalText = el.textContent;
gsap.fromTo(el,
{
scrambleText: {
text: ""
}
},
{
duration: 3,
scrambleText: {
text: originalText,
chars: "lowerCase",
revealDelay: 0,
speed: 0.2,
delimiter: ''
},
scrollTrigger: {
trigger: el,
start: "top 90%",
toggleActions: "play none none none",
once: true
}
}
);
});
});
</script>
Hover me for Interaction
2 – Hover to Scramble Text
- dm-scramble-text-interact is the CSS class used for Heading Widget. (For Elementor v4, the code will be updated when v4 comes out of beta)
- For any customization or changes, please read the explanation in Version 1 above;
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrambleTextPlugin.min.js" integrity="sha512-EVIYaMR2tIn6veV5jmP0M0DFBSBt5rAhRPsW0zwC9LyPzAIHNeWiZ4B5orgYeWbNq55vIwk8fOKCtTHwiCBvaw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-scramble-text-interact {
transition: none !important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
gsap.registerPlugin(ScrambleTextPlugin);
const scrambleEls2 = document.querySelectorAll('.dm-scramble-text-interact .elementor-heading-title');
scrambleEls2.forEach(el => {
let isAnimating = false;
el.addEventListener('mouseenter', () => {
if (isAnimating) return;
isAnimating = true;
gsap.to(el, {
duration: 1,
scrambleText: {
text: "{original}",
chars: "!@#$%^&*()-_=+<>?/[]{}",
revealDelay: 0.5,
speed: 0.8,
delimiter: ''
},
onComplete: () => {
isAnimating = false;
}
});
});
});
});
</script>
I can also switch to another Text
3 – Hover to Scramble and Switch Text
- dm-scramble-text-interact-switch is the CSS class used for Heading Widget. (For Elementor v4, the code will be updated when v4 comes out of beta)
- For any customization or changes, please read the explanation in Version 1 above;
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrambleTextPlugin.min.js" integrity="sha512-EVIYaMR2tIn6veV5jmP0M0DFBSBt5rAhRPsW0zwC9LyPzAIHNeWiZ4B5orgYeWbNq55vIwk8fOKCtTHwiCBvaw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-scramble-text-interact-switch {
transition: none !important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(ScrambleTextPlugin);
const scrambleElsSwitch = document.querySelectorAll('.dm-scramble-text-interact-switch .elementor-heading-title');
scrambleElsSwitch.forEach(el => {
let isAnimatingSwitch = false;
const originalTextSwitch = el.textContent;
const newTextSwitch = "DMmotionarts Like and Subscribe";
let showingOriginal = true;
el.addEventListener('mouseenter', () => {
if (isAnimatingSwitch) return;
isAnimatingSwitch = true;
const targetText = showingOriginal ? newTextSwitch : originalTextSwitch;
showingOriginal = !showingOriginal;
gsap.to(el, {
duration: 1,
scrambleText: {
text: targetText,
chars: "!@#$%^&*()-_=+<>?/[]{}",
revealDelay: 0.5,
speed: 0.8,
delimiter: ''
},
onComplete: () => {
isAnimatingSwitch = false;
}
});
});
});
});
</script>
Hover To Keep Scrambling
4 – Looping Scramble On Mouse Hover (A bit glitchy, but use only if your ok with the animation)
- dm-scramble-text-interact-loop is the CSS class used for Heading Widget. (For Elementor v4, the code will be updated when v4 comes out of beta)
- For any customization or changes, please read the explanation in Version 1 above.
This is a bit glitchy. If you keep your mouse over the text, it starts to get small after a while. Also, it flashes the full text for 1 frames before scrambling again. This is due to the nature of how GSAP scramble is made. I’ll try to fix this in future if I find better way.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrambleTextPlugin.min.js" integrity="sha512-EVIYaMR2tIn6veV5jmP0M0DFBSBt5rAhRPsW0zwC9LyPzAIHNeWiZ4B5orgYeWbNq55vIwk8fOKCtTHwiCBvaw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-scramble-text-interact-loop {
transition: none !important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(ScrambleTextPlugin);
const scrambleEls3 = document.querySelectorAll('.dm-scramble-text-interact-loop .elementor-heading-title');
scrambleEls3.forEach(el => {
const originalText = el.textContent;
let scrambleLoopTween = null;
el.addEventListener('mouseenter', () => {
if (scrambleLoopTween) return;
scrambleLoopTween = gsap.to(el, {
duration: 1,
repeat: -1,
ease: "none",
repeatRefresh: true,
onRepeat: () => {
// ✅ Reset the content before each loop
el.textContent = originalText;
},
scrambleText: {
text: originalText, // 👈 Use actual stored text, not "{original}"
chars: "!@#$%^&*()-_=+<>?/[]{}",
revealDelay: 9999,
speed: 2,
delimiter: ''
}
});
});
el.addEventListener('mouseleave', () => {
if (scrambleLoopTween) {
scrambleLoopTween.kill();
scrambleLoopTween = null;
}
el.textContent = originalText;
// Optional: Smooth reveal to original text
gsap.to(el, {
duration: 1,
scrambleText: {
text: originalText,
chars: "!@#$%^&*()-_=+<>?/[]{}",
revealDelay: 0.05,
speed: 0.4,
delimiter: ''
}
});
});
});
});
</script>
Scramble Text That Changes 🙂
5 – Scramble and Switch Text Sequence
- dm-scramble-text-sequence is the CSS class used for Heading Widget. (For Elementor v4, the code will be updated when v4 comes out of beta)
- For any customization or changes, please read the explanation in Version 1 above.
- You can change text for each different line and also add or remove extra lines. (Line 60 – 73 copy and paste this to add more lines)
- delay allows you to show text for a while before switching to new one.
IMPORTANT: Your original text that you added in Heading Widget should match the text you add in the last text in below code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/gsap.min.js" integrity="sha512-NcZdtrT77bJr4STcmsGAESr06BYGE8woZdSdEgqnpyqac7sugNO+Tr4bGwGF3MsnEkGKhU2KL2xh6Ec+BqsaHA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/ScrambleTextPlugin.min.js" integrity="sha512-EVIYaMR2tIn6veV5jmP0M0DFBSBt5rAhRPsW0zwC9LyPzAIHNeWiZ4B5orgYeWbNq55vIwk8fOKCtTHwiCBvaw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.dm-scramble-text-sequence {
transition: none !important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(ScrambleTextPlugin);
const dmScrambleTL = gsap.timeline({
onComplete: () => {
dmScrambleTL.restart();
}
});
//First Text
dmScrambleTL.to('.dm-scramble-text-sequence .elementor-heading-title', {
duration: 2,
delay: 2,
scrambleText: {
text: "This is the New Line",
chars: "!@#$%^&*()-_=+<>?/[]{}",
revealDelay: 1,
speed: 0.8,
delimiter: ''
}
});
//Second Text
dmScrambleTL.to('.dm-scramble-text-sequence .elementor-heading-title', {
duration: 2,
delay: 2,
scrambleText: {
text: "Consider Subscribing",
chars: "!@#$%^&*()-_=+<>?/[]{}",
revealDelay: 1,
speed: 0.8,
delimiter: ''
}
});
//Third Text
dmScrambleTL.to('.dm-scramble-text-sequence .elementor-heading-title', {
duration: 2,
delay: 2,
scrambleText: {
text: "Scramble Text That Changes :)",
chars: "!@#$%^&*()-_=+<>?/[]{}",
revealDelay: 0,
speed: 0.8,
delimiter: ''
}
});
});
</script>
