LoginGet started — it’s free
Made in Webflow

Transition Utility Pt. 1

2281 views
site profile thumbnail

Description

100% Webflow except for a tiny snippet of custom code in the footer. The snippet adds a 1.3 second delay after page-leave trigger which allows the page-exit animation to fully run. *Important* The custom code snippet for page-leave delay is currently set to run when any link ('a') is clicked. To ensure that it runs only when specific classes are clicked, you can modify the code to exclude link classes that should not have a execution delay. For example, here is the current footer code (where 'a' is any link, and 1300 is the milliseconds delay): <script> $('a').click(function(e) { e.preventDefault(); setTimeout(function(url) { window.location = url }, 1300, this.href); }); </script> And here it is modified to exclude fictitious classes .social-icon and .link-cover: <script> $('a').not('.social-icon').not('.link-cover').click(function(e) { e.preventDefault(); setTimeout(function(url) { window.location = url }, 1300, this.href); }); </script>
Feeling inspired?If this Made In Webflow site sparked some inspo, why not get started on a project of your own? Clone a site, purchase a template or start building from scratch.
transition

More by CJ Hersh

See profile
View details
Webflow Sticky Sections
725
2.8k
© 2022 Webflow, Inc. All rights reserved.