Animating svg elements

[ryandc]

Bit of an odd one that I can't seem to crack:

It's one of those fun ones where it happens sometimes, not every time.

I've got all my JS funcrtions initialising within one init function, which is called on page load and then:

swup.hooks.on('page:view', () => {
    init();
})

You can visit the dev site below, but steps to reproduce are:
Hover Methodology, click Purpose, then click to another menu link. Console lights up because it can't find an element, but the element it refers to is on the Purpose page, not one you're navigating too.
https://bb24.01110010.eu/team

The troublesome function (animations) itself checks the existence of the SVG it's animating, so I don't know why it would be triggering the console errors, when the new page you navigate to doesn't have the element on it.

const purposeLines = document.querySelector(".purpose #purpose-lines");
if (purposeLines) { 
etc
}

I tried disabling the swup cache, and tried the content.replace hook but no dice.
i'm convinced it's either me misunderstanding the lifecycle change, or i've just written some verbose code... hence why I haven't created an issue/bug.

Any help would be greatly appreciated as I'm going slightly mad....

[daun]

Looks like you're trying to animate a missing part of an svg. At least that's what I'm reading from the error and the line it links to in the minified code.

The e = t.select("circle") yields nothing — maybe the circle doesn't exist inside #purpose-lines ? — and then below e.attr is trying to access a method on e which doesn't exist.

var t = Am("#purpose-lines")
                              , e = t.select("circle")
                              , n = t.selectAll("line")
                              , i = parseFloat(e.attr("cx"))
                              , r = parseFloat(e.attr("cy"));

[ryandc]

Thans Daun .

So the page with that #purpose-lines element is: https://bb24.01110010.eu/our-purpose (scroll down to see a stupid circle, move past some stupid lines)

It works as it should, and I get no errors. Equally, if I start on another page, and then navigate to it, it again works as it should, and I get no errors.

If however you then navigate to another page from the purpose page it might trigger the error.

It's blowing my mind a bit

[daun]

Beats me, then 👽 Looks like there's some sort of delay between checking for the existence of the svg, and manipulating it, and in the meantime it seems to disappear. You'll probably increase the chance of getting proper help if you post the unminified code with some more context.

[ryandc]

Good point, just deployed non-minified code.

I was wondering if it was something I was doing incorrectly, but as I understand it:

1. Initial page load
2. JS Init
3. Click a link - Swup does it's thing
4. Content is replaced
5. JS init

It seems simple enough, but it seems like the JS is initialising both before and after the content is replaced. So It's checking for the existence of the element on the current page, finds it, then the content is replaced with the new page, then it can't see the element resulting in the error.

I've tried delaying the init of the specific function that contains the error with a big timeout, but I still get the issue.

In case it helps, here's a screenshot of the debug in console

[ryandc]

Just wanted to check if this is the best way to handle initialising functions:

// A list of functions to run
function init() {
    console.log('init');
    fitvids();
    initHeadroom();
    initAccordion();
    initMobileMenu();
    initSliders();
    initSubMenu();
    initTeam();
    initAnimations();
    scrollToContent();
    isTouchDevice();
    toggleFunctions();

    preloadImages().then(() => {
       ScrollTrigger.refresh();
    });

};

// Initial load
document.addEventListener('DOMContentLoaded', () => init());

// This event runs for every page view after initial load
swup.hooks.on('page:view', () => {
    init();
})

Or would it be better to handle page-specific functions with something akin to:

swup.hooks.on('page:view', () => {
  if (document.querySelector('#carousel')) {
    const carousel = new Carousel('#carousel');
  }
});

[daun]

The best solution would always be some sort of component framework that self-initilializes components whenever they are added to the page. Some examples would be Alpine, Stimulus, or even native web components. That would get rid of all the page-specific init code and leave you with just the global objects like Headroom and mobile menu in your case.

The next-best solution would be your second example, checking for the existence of a component whenever you know for sure the page was updated (such as on page:view), and only then executing the init code.

[daun]

Just a thought: could it be the ScrollTrigger object causing the delay? Maybe the preloadImages Promise resolves too late or out of bounds somehow and tries to access an existing animation somewhere...

[ryandc]

Thanks Daun - I've got more time today to try and crack this so will give some things a go.

ScrollTrigger is a good shout, but I found another function in the animation file that's also having issues after navigating away from the page it's featured on, and that's not dependent on scrollTrigger.

I'm going to try splitting the animation file up and seeing if that helps.

[ryandc]

Is there a way to make a page:view hook specific to a URL/slug?

[daun]

You can check the url by accessing the visit object inside the hook handler:

swup.hooks.on('page:view', (visit) => {
  if (visit.to.url === '/about') {
    /* do something */
  }
})