Interactions break when copied to a new page

Hi there! My interactions break when I copy them into a new page. Problem effects symbols too. Here’s a video to explain.

https://www.useloom.com/share/d3507177f293419084b6dbf94a0682a4

Please share your read-only link.

I will send it to you directly. I’d prefer not to share that link here at this time

Hey @DuncanHamra

I ran into same exact issue with custom order forms, sidebars, and custom header/navs!

Here is a sandbox example I just made to illistrate:
http://html-sandbox.webflow.io/ix2-multipage
Preview Designer link: Webflow - HTML SANDBOX

Here’s what I did to resolve this:

  1. Get a Piece of paper, it helps me a lot…

  2. Write down all related IX2 the Class and/or Combo Class Names

  3. Write down All/Child/Sibling/Parent relationship annotation

  4. Make sure that ELEMENT trigger is NOT on any of the crosspage interactions.
    image
    ! If Element is selected on any your primary trigger, it will likely break when copying it to new pages.

  5. Make sure all multipage IX2, has CLASS selected

  • This will ensure your IX2 transposes to teh correct Combo Class you assign
    image

5.B - Make sure that Class → Sibling and/or Child is selected for all iX2 events.
5.C - Use Class → Parent assignment for exit events

  1. Class Naming examples:
    class name: Multi Menu Toggle
    combo class name: Multi Menu Toggle–Small
    combo class name: Multi Menu Toggle–Medium
    combo class name: Multi Menu Toggle–Large

^^ in this example you’d duplicate 3 interactions to open menu.

This works in Symbols, Page Copy, and Copy Div block.

  1. To ensure maximum reliability, I use the following structure on all pages:
    -Body /// Main Page Body, configured as Flex Column
    – IX Background Wrapper /// Z=0-Column Order=1 Useful for Page Wrapper Opacity or Hide events
    – Page Wrapper /// Main Content Goes here (header, content, footer)
    – – Header
    – – Content Wrapper
    – – – Hero Section
    – – – Section
    – – – Section
    – – – Section
    – – Footer
    – IX Foreground Wrapper
    – – Lightboxes
    – – – Sign Up/Offers LB
    – – – Terms/Legal LB
    – – Alerts
    – – – Urgent
    – – – Warnings
    – – – Confirmations
    – – Chat Wrapper
    – – – Confirmations

etc…
now you can IX2 globally across whole site

image

Trobleshooting Tips:

  1. 99% of time I resolve multipage IX2 by tripple checking class names, and making sure CLASS is assigned to triggers, not element.

Other Tips:
Use Element Trigger IX2 for one off single page events.

Wow! Thanks for talking the time to thoroughly explain your process. I really appreciate it.

Unfortunately, the problem continues! I can confirm that my combo classes are setup correctly, and the problem persists on very simple interactions.

@DuncanHamra
Does the footer of this list (in screenshot) have Element or Class selected on the Toggle type?

It should look like this
image

Yeah. I’m afraid so

Set all these actions to be an initial state

37%20PM

1 Like

It works!

Thank you, Dram. The issue has something to do with stacking hide/show actions at 0 seconds (but not on page load). I can’t use initial state since we’re reinitializing Webflow occasionally, but it works perfectly if I move the show/hide actions after the toggle interaction… haha I have no idea why, but it works!

Thanks again!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.