Webflow Page Transition
Comment ça marche
Ce composant ajoute des transitions de pages fluides à votre site Webflow en quelques clics. Copiez le composant ci-dessous, collez-le dans votre projet, et personnalisez l'animation directement dans le panneau d'interactions de Webflow, sans écrire de code.
Installation
Étape 1 : copier le composant. Copiez le composant ci-dessous puis collez-le n'importe où dans votre projet Webflow avec Cmd+V (Mac) ou Ctrl+V (PC).
Étape 2 : ajouter les scripts. Dans Project Settings, collez le Head code dans la section Head Code et le Footer code dans Before body tag.
Étape 3 : créer un composant global. Transformez l'élément collé en composant et ajoutez-le sur toutes les pages où les transitions doivent fonctionner.
Options
introDurationMS: 600 : durée de l'animation d'entrée (en ms)
exitDurationMS: 1000 : durée de l'animation de sortie (en ms)
excludedClass: "no-transition" : classe à poser sur les liens à exclure
Personnalisation
Une fois installé, ouvrez le composant et repérez la div pm-transition-trigger : deux interactions y sont attachées, Page Open pour l'entrée et Page Exit pour la sortie. Modifiez-les librement dans le panneau d'interactions : blur, panneaux glissants, échelles, tout est possible, sans code.
Composant Webflow (coller dans le Designer)
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"510b42bb-45c0-e3c6-3758-22d24b158e9a","type":"Block","tag":"div","classes":["9d7649ea-5bc3-8d8e-51c8-ee3599375fe8"],"children":["07b80400-5392-4357-150a-dbe0f8f23cb8","f1b3933d-5f9f-72fd-1baf-9378260073ae"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"07b80400-5392-4357-150a-dbe0f8f23cb8","type":"Block","tag":"div","classes":["9d7649ea-5bc3-8d8e-51c8-ee3599375fe9"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"f1b3933d-5f9f-72fd-1baf-9378260073ae","type":"Block","tag":"div","classes":["9d7649ea-5bc3-8d8e-51c8-ee3599375fea"],"children":[],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}}],"styles":[{"_id":"9d7649ea-5bc3-8d8e-51c8-ee3599375fe8","fake":false,"type":"class","name":"pm-transition","namespace":"","comb":"","styleLess":"position: fixed; left: 0%; top: 0%; right: 0%; bottom: 0%; z-index: 1000000000; display: none; width: 100vw; height: 100vh; justify-content: flex-start; align-items: flex-start; pointer-events: none;","variants":{},"children":[],"createdBy":"677ba5f570de7bd5c1aad881","origin":null,"selector":null},{"_id":"9d7649ea-5bc3-8d8e-51c8-ee3599375fe9","fake":false,"type":"class","name":"pm-transition-content","namespace":"","comb":"","styleLess":"display: flex; width: 100%; height: 100vh; justify-content: flex-start; align-items: flex-start; background-color: #e8e8e8; transform: perspective(771px) perspective(532px) /* perspective(0px) */ /* perspective(0px) */; transform-origin: 50% 0%;","variants":{},"children":[],"createdBy":"677ba5f570de7bd5c1aad881","origin":null,"selector":null},{"_id":"9d7649ea-5bc3-8d8e-51c8-ee3599375fea","fake":false,"type":"class","name":"pm-transition-trigger","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"createdBy":"677ba5f570de7bd5c1aad881","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[{"id":"i-617","interactionTypeId":"MOUSE_CLICK_INTERACTION","eventIds":["e-1146","e-1147"],"target":"68858de4161faac4bd838eaf|f1b3933d-5f9f-72fd-1baf-9378260073ae","createdOn":1761682968536}],"events":[{"id":"e-1146","name":"","animationType":"preset","eventTypeId":"MOUSE_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-302","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-1147"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"68858de4161faac4bd838eaf|f1b3933d-5f9f-72fd-1baf-9378260073ae","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1761682968536},{"id":"e-1147","name":"","animationType":"preset","eventTypeId":"MOUSE_SECOND_CLICK","action":{"id":"","actionTypeId":"GENERAL_START_ACTION","instant":true,"config":{"delay":0,"easing":"","duration":0,"actionListId":"a-303","affectedElements":{},"playInReverse":false,"autoStopEventId":"e-1146"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"68858de4161faac4bd838eaf|f1b3933d-5f9f-72fd-1baf-9378260073ae","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":null,"scrollOffsetUnit":null,"delay":null,"direction":null,"effectIn":null},"createdOn":1761682968536}],"actionLists":[{"id":"a-302","title":"pm-page-open","actionItemGroups":[{"actionItems":[{"id":"a-302-n","actionTypeId":"STYLE_OPACITY","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"99a779ed-f523-a73c-dbaf-88bd85a702e6","appliesTo":"ELEMENT_CLASS","styleBlockIds":["9d7649ea-5bc3-8d8e-51c8-ee3599375fe9"],"useEventTarget":"SIBLINGS","boundaryMode":false},"value":0,"unit":"%"},"instant":false}]},{"actionItems":[{"id":"a-302-n-2","actionTypeId":"GENERAL_DISPLAY","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"68a03ce3df703dcdcfa232c8|119e6e01-fb0c-f485-2dca-7a38d5aedbb2","appliesTo":"ELEMENT_CLASS","styleBlockIds":["9d7649ea-5bc3-8d8e-51c8-ee3599375fe8"],"useEventTarget":"PARENT","boundaryMode":false},"value":"none"},"instant":true}]}],"useFirstGroupAsInitialState":false,"createdOn":1742310114872},{"id":"a-303","title":"pm-page-exit","actionItemGroups":[{"actionItems":[{"id":"a-303-n","actionTypeId":"GENERAL_DISPLAY","config":{"delay":0,"easing":"","duration":0,"target":{"nodeId":"68a03ce3df703dcdcfa232c8|119e6e01-fb0c-f485-2dca-7a38d5aedbb2","appliesTo":"ELEMENT_CLASS","styleBlockIds":["9d7649ea-5bc3-8d8e-51c8-ee3599375fe8"],"useEventTarget":"PARENT","boundaryMode":false},"value":"flex"},"instant":true}]},{"actionItems":[{"id":"a-303-n-2","actionTypeId":"STYLE_OPACITY","config":{"delay":0,"easing":"","duration":500,"target":{"nodeId":"99a779ed-f523-a73c-dbaf-88bd85a702e6","appliesTo":"ELEMENT_CLASS","styleBlockIds":["9d7649ea-5bc3-8d8e-51c8-ee3599375fe9"],"useEventTarget":"SIBLINGS","boundaryMode":false},"value":100,"unit":"%"},"instant":false}]}],"useFirstGroupAsInitialState":false,"createdOn":1742310507159}]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0,"codeComponentsRemovedCount":0}}
Head code
<style> body .pm-transition {display: block} .w-editor .pm-transition {display: none;} .no-scroll-transition {overflow: hidden; position: relative;} </style>
Footer code (before </body>)
<script> let transitionTrigger = $(".pm-transition-trigger"); let introDurationMS = 600; let exitDurationMS = 1000; let excludedClass = "no-transition"; // On Page Load window.addEventListener("DOMContentLoaded", (event) => { if (transitionTrigger.length > 0) { Webflow.push(function () { transitionTrigger.click(); }); $("body").addClass("no-scroll-transition"); setTimeout(() => {$("body").removeClass("no-scroll-transition");}, introDurationMS); } }); // On Link Click $("a").on("click", function (e) { if ($(this).prop("hostname") == window.location.host && $(this).attr("href").indexOf("#") === -1 && !$(this).hasClass(excludedClass) && $(this).attr("target") !== "_blank" && transitionTrigger.length > 0) { e.preventDefault(); $("body").addClass("no-scroll-transition"); let transitionURL = $(this).attr("href"); transitionTrigger.click(); setTimeout(function () {window.location = transitionURL;}, exitDurationMS); } }); // On Back Button Tap window.onpageshow = function(event) {if (event.persisted) {window.location.reload()}}; // Hide Transition on Window Width Resize setTimeout(() => {$(window).on("resize", function () { setTimeout(() => {$(".pm-transition").css("display", "none");}, 50);}); }, introDurationMS); </script>