CSS/JS effects broken on Safari

Question

Ive added CSS animations on text that are triggered by JS, they work fine in all browsers apart from Safari. When you click a line of text all lines of text fade out, on Safari, once you've clicked the text and go to the next page, if you click back the effect is triggered on page load and then resets and wont trigger on click.

Any idea how to fix this for Safari, you can see the effect on this page

This is the CSS animation:

.hometext.active {

  animation: fadeOutBottomLeft; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s;
}

.hometext.slide {

  animation: fadeOutTopRight; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s;
}

This is the code im using to trigger the effects:

  jQuery(".hometext").click(function() {
    jQuery(this).toggleClass("slide");
    jQuery(".hometext").toggleClass("active");
        jQuery("#header-elementor").toggleClass("active");
  })
})

Answer 1

Browser backbutton jQuery script.

$(window).on('popstate', function(event) {
 alert("pop");
 // Write your code here when user click the browser back button.
});

After your comments if I understand correctly you want opposite animation on Browser backbutton when user clicked it. Simply it will not work for you. You have to understand how browser Back Button work.

window.history.replaceState(); //work exactly like pushstate bt this one replace the history instead of creating new one...
window.history.backward(); // To move backward through history, just fire this event...
window.history.forward();// To move forward through history ...
window.history.go(-1); // Go back to one page(or whatever value u passed) through history
window.history.go(1); // Go forward to one page through history..

I tested your site in MacOS 10.14 Mojave and Safari Version 13.1.1 It will work same like as chrome.

Answer 2

You could try:

jQuery(".hometext").click(function(e) {
  jQuery(this).toggleClass("slide");
  jQuery(".hometext").toggleClass("active");
      jQuery("#header-elementor").toggleClass("active");
  setTimeout(()=> { 
    //remove the classes so they don't get reactived with back button
    //since you mentioned page load time is what's causing the delay, you may have to skip this
    jQuery(this).toggleClass("slide");
    jQuery(".hometext").toggleClass("active");
        jQuery("#header-elementor").toggleClass("active");
    //store the link in a custom attribute or any attribute and force redirect
   window.location.href = e.target.getAttribute('data-link');
    //set timeout to after animation
  },2000)
})

You would also have to strip your anchor tags of any href; unfortunately Safari is a very fickle browser when it comes to CSS.

Edit: Example html

<div data-link="/portfolio/elijah" class="elementor-element elementor-element-da798b1 hometext elementor-widget elementor-widget-heading" data-id="da798b1" data-element_type="widget" data-widget_type="heading.default">
    <div class="elementor-widget-container">
      < h2 class="elementor-heading-title elementor-size-default">
        <a href="">DRUM&amp;BASSARENA</a>
      </h2>     
    </div>
</div>