How can I rotate and scale my logo in Webflow when transitioning between pages?
TL;DR
- Set up your logo with a unique class or Symbol, then use Webflow's Interactions panel to create page load/start triggers.
- Add timed animations with rotate and scale actions, apply them on all relevant pages, and optionally use a loader overlay with JavaScript for smoother custom transitions.
To rotate and scale your logo during page transitions in Webflow, you need to use page animations with interactions. Here's how to do it step by step.
1. Prepare Your Logo in the Page
- Select or add your logo element within a Symbol or div block on your page.
- Make sure it has a distinct class name to target it specifically in interactions.
- If your logo will appear on multiple pages, consider using a Symbol for consistency.
2. Create a Page Trigger for Page Load/Unload
- Go to the “Interactions” panel (lightning icon).
- Under Page Trigger, choose either Page Load (for when a page comes in) or Page Unload/Page Start (for when a page is exiting).
- Click + Page Trigger, then select When page starts loading or When page finishes loading, depending on the animation direction you want.
3. Add an Animation for Rotation and Scaling
- Click + Timed Animation and give it a name (e.g., “Logo Rotate Scale Out”).
- Select the logo element.
- Click Add Action, then choose Scale and set the end scale values (e.g., X: 0.2, Y: 0.2).
- Click Add Action again, choose Rotate and set rotation values (e.g., Z: 360deg).
- Adjust the easing (e.g., Ease In Out) and duration (e.g., 0.5s to 1s).
- Make sure display or opacity is not set unless you want it to fade too.
4. Apply the Same Interaction on All Pages
- On every page where the logo appears, go to the page interactions, and apply the same named animation either on page load (entrance animation) or page start (exit animation).
- For smoother transitions, offset page load timing and use "wait for page to finish loading" before fading in.
5. Optional: Page Transition With Loader
- If you want to fully control page-to-page transitions, consider building a loader div that appears on click of links, plays the animation, then uses custom code to navigate to the new page.
- Use Webflow interactions to animate the logo and then run a JavaScript redirect after the animation completes.
Summary
To rotate and scale your logo between pages, use page load/start interactions in Webflow’s Interactions panel, apply rotate and scale transformations, and consistently reuse the animation across pages. For complex transitions, combine with a loader overlay and custom navigation scripting for smoother continuity.