Hi! Does anyone know how to create the highlighted effect from the hero section of this website? https://bts.com/
I want to replicate this effect throughout my site, so ideally, it should be applied to a text wrapper or something similar that is easily replicable. There are instances where two different phrases are highlighted within the same paragraph. Unfortunately, Webflow interactions don’t allow me to adjust this kind of styling, and since its not a hover effect, but a scroll into view effect, I cant tweak it either on the CSS from the selector panel
I was hoping that it could be possible to create some custom code, that targets the class that I would apply to certain text wraps through the website. Is that possible? Thank you!
Here’s a code that you can reuse to get this kind of animation.
First add this styling either on a embed component or on the custom code inside the tag
<style>
.header-highlight {
position: relative; /* Ensure positioning context for absolute children */
overflow: hidden; /* Prevent overflow of background */
}
.background-div {
position: absolute; /* Position it absolutely within the header-highlight */
top: 0;
left: 0;
bottom: 0;
z-index: -1;
background-color: red; /* Example background color */
opacity: 0; /* Start hidden */
}
</style>
You can then add this script before the tag
<!-- Include GSAP and ScrollTrigger -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<script>
// Ensure GSAP and ScrollTrigger are registered
gsap.registerPlugin(ScrollTrigger);
// Function to initialize animations
function initAnimations() {
// Select all elements with the class 'header-highlight'
const headers = document.querySelectorAll('.header-highlight');
// Loop through each header element
headers.forEach(header => {
// Create a new div element for the background
const backgroundDiv = document.createElement('div');
backgroundDiv.classList.add('background-div');
// Append the background div to the current header
header.appendChild(backgroundDiv);
});
// Create a ScrollTrigger for the header-main section
ScrollTrigger.create({
trigger: '.main-header', // The section that triggers the animation
start: 'top bottom', // When the top of the header-main hits the bottom of the viewport
end: 'bottom top', // When the bottom of the header-main hits the top of the viewport
onEnter: () => {
// Animate all background divs with stagger
gsap.to('.background-div', {
duration: 1, // Duration of the animation
opacity: 1, // Fade in effect
width: '100%', // Animate width from 0% to 100%
stagger: {
amount: 0.5, // Total duration for staggering all items (0.5 seconds)
from: "start", // Start staggering from the first element
ease: "power2.out" // Easing function for smoothness
}
});
},
onLeaveBack: () => {
// Optional: Reset or reverse animation when scrolling back up
gsap.to('.background-div', {
duration: 1,
opacity: 0, // Fade out effect
width: '0%', // Move back out of position (to left)
stagger: {
amount: 0.5, // Total duration for staggering all items (0.5 seconds)
from: "end", // Reverse staggering from the last element
ease: "power2.in" // Easing function for smoothness
}
});
}
});
}
// Initialize animations when DOM is fully loaded
document.addEventListener('DOMContentLoaded', initAnimations);
</script>
To get this to work, just highlight a text or paragraph and wrap it in a span with a class of ‘header-highlight’, also add a class for the section ‘main-header’.
So the section with class ‘main-header’ is the trigger to start the animation when it is visible and the target are all the text wrapped in a span with class ‘header-highlight’
Thank you so much for your response! @ianmuico But for some reason it isn’t working :( it worked for the second section on the “whats trending” but didn’t work for the hero section or any other section. Is there a way I could apply it many different times with a trigger for each element separately? I think its taking the first “main header” as the trigger for all other elements