Danielovitch

Hello @OSUblake, thank you for your answer. The demo in codepen is not mine, it's the inspiration I took. I see, the codepen link was seperated from my text. It's this demo you mean, didn't you? Greetings DV

Hello, I am starting out with GSAP right now and after some steps forward here is a challenge I'm thinking pretty hard about. I am working mainly with elementor and custom code. ScrollTrigger works, there are other things I have on my site on scroll. This means: gsap.registerPlugin(ScrollTrigger); is in place. I want to highlight my text at specific points while scrolling. Inspiration was this wonderful thing here: https://codepen.io/hexagoncircle/pen/gOPMwvd But I am not able yet to transfer and apply this. That's what I've done: //get all the classes "text-highlight" let highlight = gsap.utils.toArray( '.text-highlight' ); //forEach highlight.forEach(( highlight ) => { //To this on scroll scrollTrigger: { trigger: highlight, start: '-100px center', onEnter: () => highlight.classList.add('active') } }); }); I see that I do not mark something in the code above, but I do not know how to put it. The problem is that if I apply this right here from the demo: <mark class='text-highlight'></mark> to my Elementor text parts (I want to have the markup for ) the mark is already in place, because Elementor takes it as the mark. So it works from the start, but I want it to be smooth like in the demo while scrolling. Do I need to make it inactive from the start? And if yes, how? Thanks in advance and sorry if details are missing. DV

Okay, I was on the right way // banner let all_purgatory = gsap.utils.toArray( '.the-purgatory' ); all_purgatory.forEach( ( the_purgatory ) => { let blow_up = gsap.to( the_purgatory, { duration: 0.5, scaleX: 4, scaleY: 4, opacity: 0, ease: 'expo.inOut', paused: true, } ); gsap.to( the_purgatory, { scrollTrigger: { trigger: the_purgatory, scrub: false, start: () => 'top top', end: () => the_purgatory.offsetHeight/2 + ' top', onEnter: () => blow_up.restart().pause(), onLeave: () => blow_up.play(), onEnterBack: () => blow_up.reverse(), onLeaveBack: () => blow_up.restart().pause(), pin: true, // markers: true } } ); });

Hello all together, first: I am a newbie in javacript and GSAP, but I found a piece of code that I want to use in my websites for a cool animation. This is the code: // banner let the_purgatory = document.getElementById( 'the-purgatory' ); let blow_up = gsap.to( the_purgatory, { duration: 0.5, scaleX: 4, scaleY: 4, opacity: 0, ease: 'expo.inOut', paused: true, } ); gsap.to( the_purgatory, { scrollTrigger: { trigger: the_purgatory, scrub: false, start: () => 'top top', end: () => the_purgatory.offsetHeight/2 + ' top', onEnter: () => blow_up.restart().pause(), onLeave: () => blow_up.play(), onEnterBack: () => blow_up.reverse(), onLeaveBack: () => blow_up.restart().pause(), pin: true, // markers: true } } ); My aim is to use this code for multiple banners, but right now it's ID driven. I first changed the id to a class name at the banners. Then I investigate this code above. I changed "document.getelementbyID" to "document.getelementbyClass" and tried to add a foreach. the_purgatory.forEach( ( the_purgatory ) => { I thought: Okay, I need the connection to the class, not the ID. Check by switching ID to class. And I need the script to be used every time the class comes up. So I added the foreach. That were my thoughts, but to repeat it, I am a newbie. Can someone explain me what need to happen, if I want to use this code on multiple banners via class? Thanks in advance Daniel