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 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(){
if(window.gsap){
text_reveal();
clearInterval(chck_if_gsap_loaded);
}
}, 500);
function text_reveal(){
// New text headline
const textWidget = '.text-reveal h2';
const changeText = (newtext) => {
jQuery(textWidget).text(newtext);
};
const tl = gsap.timeline({ repeat: -1 });
tl.call(changeText, ['Change me to your Headline']);
tl.fromTo(textWidget, { y: '100%' }, {y: '0%', ease: 'power.out' },'<25%' );
tl.to(textWidget, { y:'-100%', ease: 'power.out'},'+=5');
tl.call(changeText, ['Also change me to your second headline']);
tl.fromTo(textWidget, { y: '100%' }, {y: '0%', ease: 'power.out' },'<25%' );
tl.to(textWidget, { y:'-100%', ease: 'power.out'}, '+=5');
}})();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
