I am trying to implement a smooth transition every time I load content inside the div container of a Single Page application. I'm not using Reactjs, just an onclick function to load the content inside my div #main-content with a Get request.

For reference, this is what the onclick function looks like inside the index file: <a class="" id="home-top-nav" href="#" onclick="$pf.homeHtml()">

This is what the content request would look like in js (invoking an IIFE: global.$pf = pf):

pf.homeHtml = function () {
   $ajaxUtils.sendGetRequest(homeHtml, function (responseText) 
     {document.querySelector("#main-content").innerHTML = responseText;
     }, false);
};

In this case the responseText is the parsed html snippet inside that gets inserted in the main-content with an ajax request. There are many other snippets that load whenever I click and request another page (about, contact, and so on).

I've tried to use Swup with no success.

What can I do to simply add a fade out effect to the content unloading and a fade-in effect to the new content loading inside the #main-content rather than having a hard transition between them?