Step 1
- Add the class name text_reveal to the headline element
- Make sure the headline element HTML Tag is set to H2
Step 2
Add this to your headline element CSS tab.
selector{
overflow:hidden;
}
Step 3
Add the class name start-reveal to the section you would like your scroll animation to begin. Make sure your headline element is inside this section.
Step 4
- Add this code in the Elementor Code area
- Choose the correct page you would like to load the script
<script>
;(function(){
let chck_if_gsap_loaded = setInterval(function(){
const eleBuilder = document.querySelector('body').classList.contains("elementor-editor-active");
if(window.gsap && window.ScrollTrigger && !eleBuilder){
gsap.registerPlugin(ScrollTrigger);
text_reveal();
clearInterval(chck_if_gsap_loaded);
}
}, 500);
function text_reveal(){
// Text Reveal Heading
const textWidget = '.text-reveal h2';
gsap.set(textWidget, {y: '100%', ease: 'power.out' });
const tl = gsap.timeline({scrollTrigger: {
trigger: '.start-reveal',
start: 'top center',
end: 'bottom center',
toggleActions:'restart none restart none'
} });
tl.to(textWidget, {y: '0%', ease: 'power.out', duration:0.5});
}})();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/ScrollTrigger.min.js"></script>
