Page Transitions using SWUP

JavaScript
1

I am attempting to use SWUP for page transitions with the following set-up. Not sure if anyone is familiar with this, but if you are I would like to know where I went wrong because it’s not working!

<%page=Request.QueryString ("page")%>

<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="UTF-8">
<title></title>


<script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>  

<script>
const swup = new Swup(); // only this line when included with script tag
</script>
<script defer src="script.js"></script>

<style>
.transition-fade {
  transition: 500ms;
  opacity: 1;
  transform: translateX(0);
  transform-origin: left;
}

html.is-animating .transition-fade {
  opacity: 1;
  transform: translateX(100%);
}

html.is-leaving .transition-fade {
  opacity: 0;
  transform: translateX(0)
}
    
</style>

</head>

<body>




<%if page="1" then%>


<h1>This the Page 1</h1>
<br /><br /><br /><br />


<%'--------------------END OF THIS PART --------------------%>
<table align=left bgcolor=yellow><tr><td>
<a href="transitions.asp?page=1a"><font face=arial color=blue size=4><b>NEXT</b></font></a></main>
</td></tr></table>
<main id="swup" class="transition-fade">
<%Response.End
end if%>

<%if page="1a" then%>
<h1>This the Page 2</h1>
<br /><br /><br /><br />
<%'--------------------END OF THIS PART --------------------%>
<table align=left bgcolor=yellow><tr><td>
<a href="transitions.asp?page=1b"><font face=arial color=blue size=4><b>NEXT</b></font></a></main>
</td></tr></table>
<main id="swup" class="transition-fade">
<%Response.End
end if%>

<%if page="1b" then%>
<h1>This the Page 3</h1>
<br /><br /><br /><br />
<%'--------------------END OF THIS PART --------------------%>
<table align=left bgcolor=yellow><tr><td>
<a href="transitions.asp?page=1c"><font face=arial color=blue size=4><b>NEXT</b></font></a></main>
</td></tr></table>
<main id="swup" class="transition-fade">
<%Response.End
end if%>

<%if page="1c" then%>
<h1>This the Page 4</h1>
<br /><br /><br /><br />
<%'--------------------END OF THIS PART --------------------%>
<table align=left bgcolor=yellow><tr><td>
<a href="transitions.asp?page=1d"><font face=arial color=blue size=4><b>NEXT</b></font></a></main>
</td></tr></table>
<main id="swup" class="transition-fade">
<%Response.End
end if%>

<%if page="1d" then%>
<%'--------------------BEGINNING OF NEXT PART --------------------%>
<h1>This the Page 5</h1>
<br /><br /><br /><br />
<%'--------------------END OF THIS PART --------------------%>
<table align=left bgcolor=yellow><tr><td>
<a href="transitions.asp?page=1e"><font face=arial color=blue size=4><b>NEXT</b></font></a></main>
</td></tr></table>
<main id="swup" class="transition-fade">
<%Response.End
end if%>

<%if page="1e" then%>
<h1>This the Page 6</h1>
<br /><br /><br /><br />
<%'--------------------END OF THIS PART --------------------%>
<table align=left bgcolor=yellow><tr><td>
<a href="transitions.asp?page=1f"><font face=arial color=blue size=4><b>NEXT</b></font></a></main>
</td></tr></table>

<%Response.End
end if%>

<%if page="1f" then%>

<h1>This the Last Page</h1>
<main id="swup" class="transition-fade">
<%Response.End
end if%>



</body>

</html>

If you are not familiar with ASP, response.end stops the page from executing, so I can use 1 page with a lot of text in each QueryString.

Any help would be appreciated.

Thanks

2

Yeah so you have a few things wrong here. First of all, make sure you add the defer keyword to the actual script tag where you are linking to swup.min.js. This tells the browser to load the script after the page renders.

Second, you seem to have several tags called <main> but you never actually have a closing tag for them. I know it is not critical to what you are doing just to get things running, but thought I would mention it.

Third, it is recommended that the links you have start with a forward slash.

So try fixing these things up and see if it improves your situation. Also make sure you keep your browser developer tools console open so you can see any errors that might be generated. You can then post your errors here to help people to help you. :slight_smile:

1 Like
3

Thanks for your help…

I did this - is this correct?

<script defer src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>

I had done that before and undid it, so tried again. When I use the forward slash, it just sends me to a 404 page - not found. My understanding with forward slash is that you have use that for a folder but not a page link. ??

The closing tag on the main was after </a>

But I rearranged the main tag before the text. Here’s what I have now, still doesn’t seem to work.

<%page=Request.QueryString ("page")%>

<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="UTF-8">
<title></title>


<script defer src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>  

<script>
const swup = new Swup(); // only this line when included with script tag
</script>


<style>
.transition-fade {
  transition: 500ms;
  opacity: 1;
  transform: translateX(0);
  transform-origin: left;
}

html.is-animating .transition-fade {
  opacity: 1;
  transform: translateX(100%);
}

html.is-leaving .transition-fade {
  opacity: 0;
  transform: translateX(0)
}
    
</style>

</head>

<body>




<%if page="1" then%>
<main id="swup" class="transition-fade">

<h1>This the Page 1</h1>
<br /><br /><br /><br />


<%'--------------------END OF THIS PART --------------------%>

<table align=left bgcolor=yellow><tr><td>
<a href="transitions.asp?page=1a"><font face=arial color=blue size=4><b>NEXT</b></font></a></main>
</td></tr></table>

<%Response.End
end if%>

<%if page="1a" then%>
<main id="swup" class="transition-fade">
<h1>This the Page 2</h1>
<br /><br /><br /><br />
<%'--------------------END OF THIS PART --------------------%>

<table align=left bgcolor=yellow><tr><td>
<a href="transitions.asp?page=1b"><font face=arial color=blue size=4><b>NEXT</b></font></a></main>
</td></tr></table>

<%Response.End
end if%>

<%if page="1b" then%>
<main id="swup" class="transition-fade">
<h1>This the Page 3</h1>
<br /><br /><br /><br />

<%'--------------------END OF THIS PART --------------------%>
<table align=left bgcolor=yellow><tr><td>
<a href="transitions.asp?page=1c"><font face=arial color=blue size=4><b>NEXT</b></font></a></main>
</td></tr></table>
<%Response.End
end if%>

<%if page="1c" then%>
<main id="swup" class="transition-fade">
<h1>This the Page 4</h1>

<br /><br /><br /><br />
<%'--------------------END OF THIS PART --------------------%>
<table align=left bgcolor=yellow><tr><td>
<a href="transitions.asp?page=1d"><font face=arial color=blue size=4><b>NEXT</b></font></a></main>
</td></tr></table>

<%Response.End
end if%>

<%if page="1d" then%>
<main id="swup" class="transition-fade">
<%'--------------------BEGINNING OF NEXT PART --------------------%>
<h1>This the Page 5</h1>
<br /><br /><br /><br />
<%'--------------------END OF THIS PART --------------------%>
<table align=left bgcolor=yellow><tr><td>
<a href="transitions.asp?page=1e"><font face=arial color=blue size=4><b>NEXT</b></font></a></main>
</td></tr></table>

<%Response.End
end if%>

<%if page="1e" then%>
<main id="swup" class="transition-fade">
<h1>This the Page 6</h1>
<br /><br /><br /><br />
<%'--------------------END OF THIS PART --------------------%>
<table align=left bgcolor=yellow><tr><td>
<a href="transitions.asp?page=1f"><font face=arial color=blue size=4><b>NEXT</b></font></a></main>
</td></tr></table>

<%Response.End
end if%>

<%if page="1f" then%>
<main id="swup" class="transition-fade">
<h1>This the Last Page</h1>
</main>
<%Response.End
end if%>



</body>

</html>
4

Went with this instead. Easier application to the way I am set up and is effective. Thanks for your help.

<style>
#fade p {
    
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
</style>

For html I can use one <div id="fade"> in the body and don’t have to use any code in my individual querystring pages.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.