▼
Streaming live at 10am (PST)

Copying Page Load Interactions from One Project to Another

Design help Animations & Interactions
#1

Hello all,

I’m playing around with cloning, and I found a cool cards animation that I want to use in a client project.

Unfortunately, I haven’t quite figured out how to copy an animation/interaction from one project to another just yet. I’ve seen many other people ask similar questions, but I have not been able to find an answer just yet.

Below is a video detailing the issue at hand.

https://youtu.be/KENdBN05CnE

Thanks in advance for any guidance you can provide!

Here is my public share link: LINK
(how to access public share link)

1 Like
#2

Hi @Zach_Pinnell,

The video you linked is not working :frowning_face:

Anyway, you can simply copy-paste any element between 2 projects of yours, and the interactions will be copied along the elements.

If you have a specific problem, share a read-only link to both projects so we can take a look.

#3

Sorry, I set the video to Private instead of Unlisted.

Read-Only links:

https://preview.webflow.com/preview/floating-cards?utm_source=floating-cards&preview=98c43ac0562e54dd91bd39ecf128083b

https://preview.webflow.com/preview/premonition?utm_source=premonition&preview=e5e4507ff5fd64da749e60352733bad3

Unfortunately, the interactions just don’t copy with elements between projects most of the time. Sometimes, a few will copy, but not all. I’m not sure what I am doing wrong.

#4

The reason for that might be that the interaction is a Page-Interaction, and not an element based.
Can you try copying the hole page? (the “d-97-section-home” div) and see if you get the interaction?

#5

To copy page trigger interactions you need to assign both interactions to any object first (for example create any empty div, give it the “on hover” trigger and assign an interaction that is currently assigned to elements on page load). Copy this div to your project and this interaction will be copied too. Then simply create new page trigger and assign this copied interaction to it.

5 Likes
#6

Hey that worked! Thank you so much!

FYI for others-- you must apply a new ‘Element Trigger’ to the Div Block, found above the ‘Page Triggers’.

1 Like
#7

Hello, do you have video tutorial how to copy element interaction? I have same problem, but i cant figure out. Thanksss

#8

No, but I think this

assign both interactions to any object first (for example create any empty div, give it the “on hover” trigger and assign an interaction that is currently assigned to elements on page load). Copy this div to your project and this interaction will be copied too. Then simply create new page trigger and assign this copied interaction to it.

is as simple to follow as it gets. Try and let me know if there is any particular step you don’t understand, I’ll try to expound.

#9

Hi guys,

I have been trying to simply copy the entire (and only) section containing the form with an animation from this template https://webflow.com/website/Animate-Submit-Form into the body of my own project. The links & also the relevant element trigger was pasted properly upon inspection. When pasting I had a box popping up saying:
“For pasting cross-site we had to drop some links.
Renamed 4 classes in order to avoid conflicts.”,
but from my understanding that shouldn’t be a problem, correct?

Somehow the lottie is not showing however, neither is the text box that’s supposed to be there on success of the form submit.

Any ideas on what I might be doing wrong?
Thank you,

Fred

#10

Nice Alex! One your later still helpful!