fernandocomet

That looks good Rodrigo Thanks a lot I am experimenting right now with Glaze, so it is GSAP + Data Attributes. Some NoCode tools use this approach See here https://codepen.io/fernandocomet/pen/bGJYXJO What is the correct approach if I want Section 1 to disappear when it is out of the viewport, and if the User comes again repeat the animation? Not sure if I should touch something on ToggleActions or better in the ScrollTrigger Start/Stop settings. For ToggleActions (onEnter, onLeave, onEnterBack, onLeaveBack) I have: [play_reverse_play_reverse] For ScrollTrigger settings I have: start-[top_50%] end-[bottom_95%]

Oh sorry and thanks Rodrigo. The issue I have is that if I apply the transformation to class "sectiontrigger", all sections with that class change their color. So I just want to change the color of each one when the user reachs them, but keeping their color when not. So I have these sections, defining background Color initially: .hero{ background-color: MediumSeaGreen; } .s1{ background-color: SlateBlue; } .s3{ background-color: DodgerBlue; } .s5{ background-color: tomato; } .s7{ background-color: gold; } I just want to change the color of these sections to their "data-color" attribute <section data-color='#FF6347' class='section sectiontrigger'>Section 1</section> <section class='section'>Section 2</section> <section data-color='#7FFF00' class='section sectiontrigger'>Section 3</section> <section class='section'>Section 4</section> <section data-color='#00FFFF' class='section sectiontrigger'>Section 5</section> <section class='section'>Section 6</section> <section data-color='#FF7F50' class='section sectiontrigger'>Section 7</section> <section class='section'>Section 8</section> But I want to keep the initial color (when the ScrollTrigger is not active), so the change should not affect all sections Doing as many scrollTriggers as sections I want to change is not a good approach.

What if I have: - Many sections - Only some of them change background color - I just want to target each sections If you see this demo https://codepen.io/fernandocomet/pen/PogOQQr First two are ok, but I am changing the color to all classes with naming "sectiontrigger". What if I just want to target the current section on the viewport? What is the best approach?

Oh thanks! Didn't know was obsolete This works, thanks a lot

Here, When my navbar is green, if I resize the viewport, I loose the styles. I am using: ScrollTrigger.saveStyles(".navbar"); But I think is not working, probably I miss something

Thanks Rodrigo, Don't worry, I assure you I am more confused than you with the code The thing is that in the demo with only one ScrollTrigger https://codepen.io/GreenSock/pen/YzdYdzK onToggle is not working when you scroll down and then you scroll back to top as NavBar is not getting transparent This is what I want to achieve:

Thanks! Good use of Attributes. I have realized of a minor issue from my previous demo https://codepen.io/fernandocomet/pen/gOZojBb: Once you have scrolled down, if you go back to top: - When the navbar gets to "colorchange", it should be black - When it gets out of "colorchange" it should be transparent Looks like events "onEnterBack" and "onLeave" are not working. Maybe I have an event issue Any hint?

How can I optimize this code? Is doing what I want but do I need three Scrolltriggers?

Oh yes! That helps and has less Code than mine https://codepen.io/fernandocomet/pen/KKbZvao Thanks again

The idea is: - When the section is white have NavBar with tomato background color - When the section is black have NavBar with transparent background - When the section is over "darkhero" NavBar is blue I think my OnLeave event is not working. How can I improve this? Thanks in advance

Thanks a lot! That works

Thanks again! For example I want the confetti effect just when user is over that section. So if I have this structure: <div class="clicker" id="clicker"> Clicker </div> <div class="spacer"> Spacer </div> <div class="launcher" id="launcher"> Launcher </div> <div class="spacer">Spacer</div> I added another ScrollTrigger to stop it once you enter the spacers let tl = gsap.timeline({ scrollTrigger: { trigger: ".launcher", onEnter: myConfetti, onLeave: confetti.reset(), toggleActions: "restart pause resume pause" } }) let tl2 = gsap.timeline({ scrollTrigger: { trigger: ".spacer", onEnter: confetti.reset(), toggleActions: "restart pause resume pause" } }) I don´t think that is doing nothing, the Confetti lasts for 3 seconds anyway: function myConfetti() {var end = Date.now() + (3 * 1000); Updated Codepen https://codepen.io/fernandocomet/pen/abjEJvW

Mmmm, not sure if it is working, I added onLeave: let tl = gsap.timeline({ scrollTrigger: { trigger: ".launcher", onEnter: myConfetti, onLeave: confetti.reset(), toggleActions: "restart pause resume pause" } }) https://codepen.io/fernandocomet/pen/abjEJvW

I wonder if this can be done better. Want to play the Confetti when user scrolls at "launcher" How to stop it?

Ok thanks, you mean like a Proxy?