How can I rotate and scale my logo in Webflow when transitioning between pages?
TL;DR
- Use a Symbol for the logo to ensure consistent positioning and animations across pages.
- Create a Page Load animation to scale and rotate the logo on entrance.
- Add Click interactions to links to scale/rotate the logo on exit and delay navigation using "Navigate to URL" after the animation.
To create a rotating and scaling logo transition between pages in Webflow, you’ll need to use the Page Trigger interactions and possibly a persistent symbol if you want the logo to animate across pages.
1. Convert Logo to Symbol for Page Persistence
- If you want the logo animation to persist across page loads, place your logo in a Symbol and use the same Symbol across pages.
- This allows for consistent animation and layout positioning on each page.
2. Add Page Load Interaction (for Entrance Animation)
- Go to the Page where the entrance animation should occur.
- Open Interactions Panel (lightning bolt icon).
- Under Page Trigger, select Page Load → When Page Finishes Loading.
- Click +Timed Animation, give it a name like "Logo Entrance".
- Select your logo inside the Symbol.
- Use these animation steps:
- Initial state: Scale = 0.5, Rotation = -90°
- Animation: Scale to 1.0 and rotate to 0° over 0.5–1s with Easing (e.g., ease-out).
3. Add Page Click (or Link Click) Interaction for Exit Animation
- To animate the logo before page navigation, use Link Interactions.
- Select a link, go to Interactions Panel → Element trigger → Mouse Click (Tap).
- Choose "Start Animation" → Create a new animation like "Logo Exit".
- Animate the logo:
- Scale up to 1.5, rotate 90°, fade out (optional), over 0.3–0.5s.
- At the end of the animation, add a "Navigate to URL" action.
- Set the URL manually to the desired page.
- Disable default link behavior to control timing.
4. Use Page Load Delay (Optional)
- Because Webflow reloads pages unless using a SPA workaround, you can fake a transition by:
- Preventing default link action temporarily.
- Playing the exit animation.
- Then manually routing with a delay (via the "Navigate to URL" step).
5. Testing Across Pages
- If using Symbols, make sure the same logo object is consistently named and positioned across all pages.
- Preview in Webflow, but test full transitions on the published site to verify inter-page behavior.
Summary
To animate a logo by scaling and rotating between pages, use Page Load animations for entrances and Click interactions with delayed navigation for exits. Use Symbols to maintain logo consistency across pages.