GSAP Highlight Text on Scroll Animation
Using GSAP Highlight Text on Scroll Animation with Elementor’s Flex Container is a game-changer for web designers who want to create interactive, modern websites. And the best part? You can achieve all this without writing complex code – especially if you follow along in our Hindi/Urdu tutorial. Don’t forget to subscribe to our YouTube channel for more!
Code: Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/split-type@0.3.4/umd/index.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
const split = new SplitType(".ha-cool-split h2", {
types: "words, chars",
});
const tl = gsap
.timeline({
scrollTrigger: {
trigger: ".about",
start: "top 10%",
end: "+=125%",
scrub: 0.5,
},
})
.set(
split.chars,
{
duration: 0.3,
color: "white",
stagger: 0.1,
},
0.1
);
</script>
Code: CSS
.ha-cool-split h2 {
width: 100%;
color: rgba(255, 255, 255, 0.125);
transition: color 0.3s;
} h2 {
width: 85%;
color: rgba(255, 255, 255, 0.125);
transition: color 0.3s;
}
Step by Step : Video Tutorial
