Design and interaction

Design help General
1

Hi, I’m working on a Webflow project and I’m wondering if it’s possible to trigger an animation on one page by clicking a button on a different page. Specifically, I want to click a button on my homepage that will cause a hidden text element to appear on a separate page. Could you provide guidance on how to achieve this within Webflow’s native functionality or suggest any custom code solutions if necessary?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi Mabelle

Step 1: Add Custom Code to the Homepage

Place this inside the <body> section of your homepage in Page Settings:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("trigger-btn").addEventListener("click", function() {
      localStorage.setItem("triggerAnimation", "true");
      window.location.href = "/target-page"; // Change to your target page URL
    });
  });
</script>

Make sure your button has the ID “trigger-btn”.

Step 2: Add Custom Code to the Target Page

Inside the Page Settings of your target page, add this code in the <body> section:

html

<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (localStorage.getItem("triggerAnimation") === "true") {
      localStorage.removeItem("triggerAnimation"); // Prevent repeated animation
      document.getElementById("hidden-text").style.display = "block"; // Adjust this based on your animation setup
    }
  });
</script>

Make sure the hidden text element has the ID “hidden-text”.

3

Webflow’s native interactions don’t support triggering animations across different pages, but you can achieve this with a combination of URL parameters and custom JavaScript. First, modify your button’s link to include a query parameter (e.g., yourpage?showText=true). Then, on the target page, add a custom <script> in the Page Settings or inside an Embed block that reads the URL parameter and triggers the animation. Use Webflow’s interactions with display: none and opacity: 0 for the hidden text, then use JavaScript (window.location.search.includes("showText=true")) to add a class that triggers the animation when the page loads.