LoginGet started — it’s free
Made in Webflow

Transition Utility Pt. 2

2057 views
site profile thumbnail

Description

Another variation of the page transition utility. As noted in Part 1, I've added a small snipped of code that adds a delay to the page-leave trigger which allows the 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 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.
transitionspagetransitions

More by CJ Hersh

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