Valerie

@Rodrigo I've implemented the .toggle strategy and it works great in codepen, however when placing on my development environment there is an error "Cannot read properties of undefined (reading 'toggle'). I was able to log the container, array of colors and the index so i'm not sure what is missing here. Anything I'm missing here? Thank you in advance!

Hello, I'm trying to change the color of the nav based on the scroll index of the section by looping through an array of class names that set the background color. This pen is looping through an array of hex colors to set the background color, but i'm looking to change out line 17. Rather than looping through navColors, I need to loop through navColorsClassBased and add/remove the class from .nav based on the scroll index. Please let me know if you have any questions, I really appreciate your guidance on this one! -Valerie

@mvaneijgen Thank you for pushing me in the right direction! I have this updated more minimal demo with an array of each of the slide id's to scroll to and initial swing at next steps needed. Ideally this will use the same ScrollTrigger start and end points that control the background color. So the Next button's scrollTo destination update at the same time. Please let me know if you need any additional information, thank you so much!

Hello, I'm looking to use the Next and Previous buttons to scroll to the Next and Previous .desktopContentSection element. In the codepen, I have the Next button linked to #green and Previous buttons hard coded to #red to demonstrate the behavior, however after the element has scrolled to #green, if the Next button is clicked again the user is scrolled to #pink and then #blue. I'm thinking I would need to utilize Observer, but i'm struggling looking for an example I can adjust for my needs. Any assistance is very much appreciated, please let me know if you need anything from me. Thank you!

@Rodrigo What if there are an unknown amount of .wrapper's ? For example, what if there was a "wrapper third", is there a way to modify forEach rather than specifying a new const = boxThree ?

Hello, I'm looking to add multiple horizontal marquee's on a single page, and the number of images in each marquee could differ. In the example pen, it's like the count from the second .wrapper is effecting the first .wrapper. Ideally the each of the wrappers animation would behave like in this example, regardless if they have a different number of images. what is the best approach to modify to achieve forEach behavior?

In this example, the panels are set to 100vh, and at normal browser settings the component is behaving as expected. The issue is when the user is zoomed in to 150%, some of the content becomes cut off and unavailable in panel 2. Is there a fix or best practices for this issue, or how do I best approach to achieve WCAG Level AA ?