Hi all,
Here are some effects you can apply on page load. These are made to create page-to-page transitions.
All codes below are to be inserted in the custom code header at app level (to have the effect for all pages) or at page level (to have the effect on certain pages).
1) Left to right effect on page load
<style>
body {
opacity: 0;
transition: opacity 0s ease-in-out;
}
#page-transition-wrapper {
position: absolute;
width: 100%;
transition: transform 0.5s ease-in-out, opacity 0.5s;
}
.slide-in-left-to-right {
transform: translateX(-100%);
opacity: 0;
}
.active {
transform: translateX(0);
opacity: 1;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
let body = document.body;
body.style.opacity = "1";
let wrapper = document.getElementById("page-transition-wrapper");
if (!wrapper) {
wrapper = document.createElement("div");
wrapper.id = "page-transition-wrapper";
while (body.firstChild) {
wrapper.appendChild(body.firstChild);
}
body.appendChild(wrapper);
}
wrapper.classList.add("slide-in-left-to-right");
requestAnimationFrame(() => {
wrapper.classList.remove("slide-in-left-to-right");
wrapper.classList.add("active");
});
});
</script>
2) Fade and scale effect on page load
<style>
body {
opacity: 0;
transition: opacity 0s ease-in-out;
}
#page-transition-wrapper {
position: absolute;
width: 100%;
transition: transform 0.5s ease-in-out, opacity 0.5s;
}
.fade-scale-in {
transform: scale(0.9);
opacity: 0;
}
.active {
transform: scale(1);
opacity: 1;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
let body = document.body;
body.style.opacity = "1";
let wrapper = document.getElementById("page-transition-wrapper");
if (!wrapper) {
wrapper = document.createElement("div");
wrapper.id = "page-transition-wrapper";
while (body.firstChild) {
wrapper.appendChild(body.firstChild);
}
body.appendChild(wrapper);
}
wrapper.classList.add("fade-scale-in");
requestAnimationFrame(() => {
wrapper.classList.remove("fade-scale-in");
wrapper.classList.add("active");
});
});
</script>
3) Rotate effect on page load
<style>
body {
opacity: 0;
transition: opacity 0s ease-in-out;
}
#page-transition-wrapper {
position: absolute;
width: 100%;
transition: transform 0.5s ease-in-out, opacity 0.5s;
}
.rotate-in {
transform: rotate(-10deg);
opacity: 0;
}
.active {
transform: rotate(0);
opacity: 1;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
let body = document.body;
body.style.opacity = "1";
let wrapper = document.getElementById("page-transition-wrapper");
if (!wrapper) {
wrapper = document.createElement("div");
wrapper.id = "page-transition-wrapper";
while (body.firstChild) {
wrapper.appendChild(body.firstChild);
}
body.appendChild(wrapper);
}
wrapper.classList.add("rotate-in");
requestAnimationFrame(() => {
wrapper.classList.remove("rotate-in");
wrapper.classList.add("active");
});
});
</script>
4) Zoom and fade effect on page load
<style>
body {
opacity: 0;
transition: opacity 0s ease-in-out;
}
#page-transition-wrapper {
position: absolute;
width: 100%;
transition: transform 0.5s ease-in-out, opacity 0.5s;
}
.zoom-in {
transform: scale(0.8);
opacity: 0;
}
.active {
transform: scale(1);
opacity: 1;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
let body = document.body;
body.style.opacity = "1";
let wrapper = document.getElementById("page-transition-wrapper");
if (!wrapper) {
wrapper = document.createElement("div");
wrapper.id = "page-transition-wrapper";
while (body.firstChild) {
wrapper.appendChild(body.firstChild);
}
body.appendChild(wrapper);
}
wrapper.classList.add("zoom-in");
requestAnimationFrame(() => {
wrapper.classList.remove("zoom-in");
wrapper.classList.add("active");
});
});
</script>
5) Skew and fade effect on page load
<style>
body {
opacity: 0;
transition: opacity 0s ease-in-out;
}
#page-transition-wrapper {
position: absolute;
width: 100%;
transition: transform 0.5s ease-in-out, opacity 0.5s;
}
.skew-in {
transform: skewX(-10deg);
opacity: 0;
}
.active {
transform: skewX(0);
opacity: 1;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
let body = document.body;
body.style.opacity = "1";
let wrapper = document.getElementById("page-transition-wrapper");
if (!wrapper) {
wrapper = document.createElement("div");
wrapper.id = "page-transition-wrapper";
while (body.firstChild) {
wrapper.appendChild(body.firstChild);
}
body.appendChild(wrapper);
}
wrapper.classList.add("skew-in");
requestAnimationFrame(() => {
wrapper.classList.remove("skew-in");
wrapper.classList.add("active");
});
});
</script>
6) Ease-in effect on page load
<style>
body {
opacity: 0;
transition: opacity 0s ease-in-out;
}
#page-transition-wrapper {
position: absolute;
width: 100%;
transition: opacity 0.4s ease-in;
}
.fade-in {
opacity: 0;
}
.active {
opacity: 1;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
let body = document.body;
body.style.opacity = "1";
let wrapper = document.getElementById("page-transition-wrapper");
if (!wrapper) {
wrapper = document.createElement("div");
wrapper.id = "page-transition-wrapper";
while (body.firstChild) {
wrapper.appendChild(body.firstChild);
}
body.appendChild(wrapper);
}
wrapper.classList.add("fade-in");
requestAnimationFrame(() => {
wrapper.classList.remove("fade-in");
wrapper.classList.add("active");
});
});
</script>
