How can I rotate and scale my logo in Webflow when transitioning between pages?
- Convert your logo to a symbol for persistence across pages.
- Create a Page Load animation to rotate and scale the logo in.
- Add click-triggered exit animations to navigation links, then delay page navigation until after the animation completes.
To rotate and scale your logo during page transitions in Webflow, you'll need to use Page Trigger Animations combined with a symbol or persistent logo element. Here's how to set it up:
1. Convert Your Logo to a Symbol
- Select your logo element in the Navigator.
- Right-click and choose Convert to Symbol, or click Create Symbol from the top bar.
- Give it a name like Global Logo.
- This allows the logo to persist across multiple pages consistently.
2. Apply Initial and Exit Animations
- Go to your Homepage (or entry page) and select the Page Trigger tab in the Interactions panel.
- Click Page Load ► When Page Finishes Loading.
- Add a new animation and name it something like Logo entrance.
- Add a scale and rotate transform for your logo (e.g., scale from 0.5 to 1, rotate from 180° to 0°).
- Make sure to set the initial state using checkboxes for scale and rotation.
3. Add Exit Animation When Navigating Away
To create animated transitions between pages (e.g. logo scaling/rotating out):
- Select your navigation links or buttons.
- In the Interactions panel, choose Mouse Click (Tap).
- Add an interaction called Page Transition Out.
- Animate the logo to scale down and rotate (e.g., scale to 0.5, rotate 180°).
- Use the Navigate to Page interaction delayed by the animation’s duration (e.g., after 800ms).
- Be sure to uncheck "Wait for assets to load" in the page load animation to avoid delays.
4. Use a Persistent Layout via CMS or Custom Code (If Needed)
Webflow reloads the DOM between pages, so animations don't persist unless you:
- Use Barba.js or similar tools via custom code (advanced method).
- Or simulate transitions by building a one-page site with sections, then use anchor links and smooth scrolling/animations to mimic page changes.
However, with symbol-based navigation and logo, combined with click-triggered animations before page change, you can achieve visually smooth transitions.
Summary
To rotate and scale your logo between pages in Webflow, place it in a symbol, create a Page Load animation for the intro, and use Click interactions on navigation links to animate the exit. Use timed delays to trigger the page change after the animation completes.