So I am trying to add the fadeInTop class to the div with the class animation. The Javascript is not working correctly...
The console returns me this which goes back to that line: document.querySelectorAll(".animated".classList.add(fadeInTop))
Uncaught TypeError: Cannot read properties of undefined (reading 'add')
at application.js:41:1
at Array.forEach (<anonymous>)
at IntersectionObserver.<anonymous> (application.js:39:1)
This is in the application.js file:
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if(entry.isIntersecting){
document.querySelectorAll(".animated".classList.add(fadeInTop))
}
})
})
observer.observe(document.querySelector(".containerFadeIn"))
This is from the home.html.erb view:
<main class="home-main">
<%# fist box %>
<div class="home-text-1 containerFadeIn">
<div class="row containerFadeIn">
<div class="col-md-9 d-flex animated">
<div class="vendo-logo-home">
<%= image_tag "vendo-logo.png"%>
</div>
<div>
<h1>The Future begins</h1>
<h1 > with <span class="light-blue"><strong>VENDO</strong></span></h1>
</div>
</div>
</div>
</div>
</main>
my main goal is to make the text fade into the screen when the text is scrolled into the screen (if i add the fadeInTop class to the the fade in animation works)
This doesn't look right document.querySelectorAll(".animated".classList.add(fadeInTop))
document.querySelectorAll this should return node list so you need to iterate through all elements like:document.querySelectorAll(".animated").forEach(element => element.classList.add("fadeInTop"))
Keep in mind that nodelist is not an array but it does accept forEach method. You might want to convert that into array like Array.from(document.querySelectorAll(".animated")) and then call forEach method.
document.querySelector(".animated").classList.add("fadeInTop")