GSAP Dynamic Page Transition Cloneable

site profile thumbnail

Description

Enhance your Webflow website with dynamic page transitions using a bit of GSAP magic! How to Implement: 1. Assign a Data Attribute: To activate the transition on your internal links, add a custom attribute: `data-page-name="Your Page Name"` to each link. You can personalize this by using CMS fields for dynamic page names. 2. Modify the Code: If desired, you can locate and adjust the code in the 'Custom Code' section within the site settings. Things to Note: - This implementation works seamlessly with internal links. External links (those directing to other websites) will not trigger the transition. - Ensure that the 'transition-cover' and 'transition-text' classes are properly set up in your Webflow project as per the GSAP code provided. Get in Touch & Stay Updated: For more Webflow tips, tricks, and updates, follow me on Twitter: https://twitter.com/ludoviclosco Enjoy!
gsapgsapanimationcustomcodepagetransitionspage transitiondynamicjavascriptcustomjavascript

More by Ludovic Losco

See profile