How can I load next page and run animation on that page with one click?

Question

So the thing is that I want to click a button on ./page.html so it opens ./index.html and the animation starts.

Pages are same domain
I don't want animation to start every time I open the ./index.html only when I click the button
I'd like it to be vanilla JS solution but jquery is ok

the main problem I can't solve is that I trigger button with specific id and the console says "Cannot read properties of null (reading 'addEventListener')"

In other words in ./index.html I have a nav bar with links but one of the sections mentioned in nav bar is already present in ./index.html so I decided to highlight it with animation when I click that link. On ./page.html I still have same nav bar with same links (surprise) but this time I want when I click that button to open ./index.html first and then play the animation to highlight that section

I tried different solutions including setting a delay, using localStorage and iframe but none of these worked for me (or I was using them wrong)

Here's the minimization of the code

./index.html (section with class skills is the element where I want the animation to play)

        <nav>
           <a id="skills-button-main"  class="buttons corner-nav" href="#">skills</a>
        </nav>

         <section class="skills" id="skills-panel">
         </section>

./page.html (button that I want to click so the animation on ./index.html plays)

     <nav>
        <a id="skills-button-projects" class="buttons" href="./index.html">skills</a>
     </nav>

JS (this is how I make animation play every time I click on #skills-button-main in ./index.html)

if(document.getElementById("skills-button-main")){
$("#skills-button-main").click(function() {
    const el = $("#skills-panel").addClass("skills-animation");
    setTimeout(function() {
        el.removeClass("skills-animation");
    }, 2000);
})};
}

JS (this is one of the variation I tried to do same thing but with loading ./index.html page first)

if (document.getElementById("skills-button-projects")){ 
    document.getElementById("skills-button-projects").addEventListener("click", function() {   
    window.location.href = "./index.html";
    if(document.getElementById("skills-button-main")){
        $("#skills-button-main").click(function() {
            const el = $("#skills-panel").addClass("skills-animation");
            setTimeout(function() {
                el.removeClass("skills-animation");
            }, 2000);
        })};
    });
}

I'm using if statement at start because it's the same .js file so the script runs even if ID's doesn't exist on current html

Please somebody help

Ahmad MRF · Answer 1 · 2022-04-15T13:48:33.857

i hope this answer could help you.
with document.referrer you can get previous page that refer you to current page. and with performance.navigation.type you can check that page was not reloaded.

window.performance.navigation property is deprecated and you can use this answer to improve your code if you want . i did not use it for a simpler answer.

window.addEventListener('load', ()=>{
const section = document.getElementById('skills-panel');
if(!performance.navigation.type && document.referrer.includes('/page.html')){
  section.classList.add('add')
  section.addEventListener('animationend', ()=>{
  section.classList.remove('add')
   })
  }
})

i put the whole codes on animateafterload.w3spaces.com

How can I load next page and run animation on that page with one click?

1 Answers1