Custom code to trigger the same interaction on all elements

Design help Custom code
1

I am trying to add a scroll interaction to every rich text p, heading, and list item across the site. So far, I have added these individually, but the site is huge and I’m worried about this slowing down the site with lots of redundant code (not to mention the time it takes and currently there is no way to apply it automatically to new content).

I have a class set up called “scroll-in–bottom” where I can add it to elements that aren’t inside of rich text and it will automatically apply the interaction. I tried adding some JavaScript code to add that class to all of these elements, but the interaction still did not work when I did that. This is the code I used to add the class:

<script>
	const el = document.querySelectorAll(".w-richtext p, .w-richtext h1, .w-richtext h2,.w-richtext h3,.w-richtext h4, .w-richtext h5, .w-richtext h6, .w-richtext  ul li");
	el.classList.add("slide-in--bottom");
</script>

Let me know if you all have any ideas on how to accomplish this! Thanks!!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey,

try looping through all the elements contained in “el” & add the class on each one. Something like this:

el.forEach((e) => {
  e.classList.add('slide-in--bottom');
});

:slight_smile:

3

Hi! Thanks for this. I was already able to add the class to all elements inside the rich text, but the interaction wasn’t working on those elements even though the class had been added.