Refresh page when media query breakpoints are triggered

Design help Custom code
1

Is there a script to refresh the page when breakpoints are triggered?

I have an on load page animation (for desktop only) and if halfway through it the page is resized by user, the animation is interrupted and the rest of the elements don’t finish loading.

2

There seems to be plently of alternatives with Javascript.

https://stackoverflow.com/questions/14915653/refresh-page-on-resize-with-javascript-or-jquery

3

Thanks Vincent! How do I implement that in webflow?

just javascript:

window.onresize = function(){ location.reload(); }
with jquery:

$(window).resize(function(){location.reload();});
or

$(window).on('resize',function(){location.reload();});
4

If anyone comes across this, I have the solution here:

<script>

var initialViewportWidth = window.innerWidth || document.documentElement.clientWidth;

// portrait mobile viewport initial, any change refresh
if (initialViewportWidth < 480) {
 		 window.addEventListener('resize', function () {
				newViewportWidth = window.innerWidth || document.documentElement.clientWidth;
				if (newViewportWidth > 479) {
					location.reload();
					}
			});
}

// landscape mobile viewport initial, any change refresh
else if (initialViewportWidth > 479 && initialViewportWidth < 768) {
    window.addEventListener('resize', function () {
				newViewportWidth = window.innerWidth || document.documentElement.clientWidth;
				if (newViewportWidth < 480 || newViewportWidth > 767) {
					location.reload();
					}
			});
}

// tablet viewport initial, any change refresh
else if (initialViewportWidth > 767 && initialViewportWidth < 992)  {
      window.addEventListener('resize', function () {
				newViewportWidth = window.innerWidth || document.documentElement.clientWidth;
				if (newViewportWidth < 768 || newViewportWidth > 991) {
					location.reload();
					}
			});
}

// web viewport initial, any change refresh
else if (initialViewportWidth > 991) {
        window.addEventListener('resize', function () {
				newViewportWidth = window.innerWidth || document.documentElement.clientWidth;
				if (newViewportWidth < 992) {
					location.reload();
					}
			});
}


</script>
2 Likes