Streaming live at 10am (PST)

Interaction 2.0 - duplicated pages and interactions


#1

I had created a page with interactions on it, then later wanted to duplicate that page to make an alternate version, and all of the interactions got duplicated twice and renamed to “{previous-interaction-name} 2” and “{previous-interaction-name} 3”… they also lost any “replace elements in animation” settings they had. I could see this being extremely annoying if you have a lot of interactions on a page… Is this intended functionality?


#2

Hi @DrewPalko

Thanks for posting this one as well. This is expected behavior. When you duplicate or copy/paste an element, the new element gets a completely different ID. Since the interaction is associated with the original element and original ID, it does not follow.

Here is an example on how to resolve this. For this card mouse over interaction, I set both elements to “replace current element” as follows:
25 AM

Only after I added these settings did I copy/paste the interaction.

Here is a video showing the behavior before I added the settings and the behavior after adding those settings.

I hope this helps!


#3

After playing with it some more, it seems to be when I modify the custom code on the page and save it… it retroactively creates and applies new interactions to elements that had interactions applied to them when I duplicated the page. Elements that didn’t have an interaction applied to them when the page was duplicated (apply button) are unaffected.

Preview Link:
https://preview.webflow.com/preview/fet-job-board?preview=b8ea6bcb08440ac650e3184c6a19433a


#4

Hi Brando!

Looks like the problem here is with a pretty common (I think) use case: what happens when I have interactions on the page which are ALREADY being set up with the “replace current element” functionality.

For example instead of redoing a lot of interactions on the other page where there should be all the same interactions I will simply duplicate a page with interactions already created. RIght? Well, the problem is that all interactions which had “replace elements” on them will lose this checkbox and assigned classes and there will be a need to manually fix all the instances, replacing interactions again. Which is honestly a chore.

Is this how it supposed to be? Just feels wrong currently.


#5

Hi @dram @DrewPalko

Thanks for the extra information!

I spoke with our team more on this and we are going to work on a fix for this. After this fix is pushed you will be able to duplicate a page that has interactions and any replace elements settings will remain intact for those interactions.

I’ll post back here when I have more info!


#6

Thanks for this @Brando this was exactly what I was looking for!


#7

Hey Webflow Team, any news on this fix? I am working on a site right now which re-uses the same interactions on each page, with Current Element replacement, and I am ending up with scores and scores of duplicated interactions, which is entirely redundant when the interaction itself is the same throughout and is only being applied to current element.

Plus, when I go in and delete those extras, I find it removes them from previously-completed pages (!!) so I have to keep going back and checking the pages to see if any were removed/deleted, and re-apply them. It’s taking way longer than it should, and I am wondering if I should have used legacy interactions instead, as those were applied to a div item regardless of its class name, and reused perfectly across pages without any multiples being created…

Loving the new interactions, but this duplication issue isn’t making anything easier.

Hope a fix will be here very soon :slight_smile:

Thanks so much guys!


#8

Hi @DrewPalko @dram and @aaleks

Thanks for your patience on this. You should now be able to duplicate pages that have interactions and any replace elements settings should remain intact for those interactions.

@energidesign Are you seeing this issue when duplicating a page? Or when copy/pasting elements?


#10

Excellent news! Now if only we could copy elements from one page to another retaining the interactions that would be great :wink:


#11

Hi Brando,

@energidesign https://forum.webflow.com/u/energidesign Are you seeing this issue when duplicating a page? Or when copy/pasting elements?

Thanks for the info. Before I get into it though, I want to ask if this new update addresses the multiple duplicated interactions (numbered 2, 3, etc) which occur when a page is duplicated?

To respond to the question above, it’s with copy and paste also. But I was also having instances yesterday where an item showed multiples of the same interaction when duplicated. These are the steps I mean:

Page with existing content, 3 sections with a single interaction (called Bike Slide) applied to a div, each with replace with current element checked.

Duplicate page, go to duplicate.

Above action would already have been duplicated to Bike Slide 2, 3 and 4 for the three sections on this page, so the original is not being used. This is redundant to me, as I want them all to use the original Bike Slide interaction, so any changes I make to that interaction apply across the entire site.

I select each of the divs, change their interaction back to the original Bike Slide, and re-set it to replace with current element, and delete the 2, 3 and 4 versions. Extra work, of course.

I then go back to the page which this was duplicated from, and those sections with interactions originally, now have none on. I have to re-apply Bike Slide to each one, and then set to current element.

But also strange, is that on the duplicated page, where I have now reset all the sections to use that one interaction, if I take one of those sections and copy/paste in the page, when I select that section’s div and check the interaction applied, it’s still there — but showing anywhere up to 8 copies of it (all named the same, no numbers) all applied.

I am hopeful this update has fixed this, but I wanted to outline the issues I personally was seeing over the last days when I have been assembling pages, duplicating them with just a need to exchange text and background images, but have ended up basically re-applying all interactions, both to divs and also on page load…

Thanks so much, hope I can be of help with any more questions.

Steve

Steve Holmes
Creative Director

energi.design http://energi.design/


#12

I’m still noticing the behavior mentioned in this post. If I set all the interactions on a page to use a specific class name instead of an element, then duplicate the page, all of the interactions are still duplicated. This just sort of feels broken.


#13

I am having the same issues. How do I fix this because now the interactions are not working and the designer is acting slow.

Any fixes yet?


#14

I’m also noticing the behavior mentioned in this post…
Duplicate page = duplicate interactions


#15

IS it still not possible to do this? I have to rebuild the animation for every element on every page? Thanks :slight_smile:

ps. Legacy animations are ok to copy and paste from page to page.


#16

No, you can copy ix2 interactions from page to page as well. The best practice is to use absolute targets when creating them though (as in “replace element” and point to the class of that element) but you should be fine either way (aside from all interactions duplicated to accommodate new id’s)


#17

Brilliant thank you. I keep being lazy and reverting to the legacy ones I knew so well but am really struggling to get a preloader to work. It always seems to show a flash of the website before showing the preloader when I tried to imitate this one: https://webflow.com/website/example-page-loader

Think I need to practice a few of the basics with 2.0 first.

Thanks again.


#18

I am yet to try making preloader myself so cannot advize. Will have to face this task soon. We’ll see how it goes.


#19

Cool well I will post anything of use if I manage it!


#20

I’ve only been able to duplicate actions between pages referencing the class. Does not seem to work using the element.


#21

Yes, you are correct, just tried it now.