How can I reuse or copy page triggers?

Design help Animations & Interactions
1

Hey all (or whoever knows how),

I’ve been struggling with how manual Page Triggers are to reuse across a site… there’s only one tutorial on reusing Element Triggers, with no reference to how to manage Page Triggers.

I’ve got a few pages that rely on about 5 different Page Triggers and it’s doing my head in having to add them all each time… I thought the Class-based feature would solve this?

If anyone knows a shortcut or a solution, I’d love to hear it!

Cheers,
Marshy

3 Likes
2

Sorry, I have no solution for this issue, but wanted to add that I’m having the same issue.
I’m working on a portfolio site that has about 20 artists, I have to set up the page trigger animations for the menu (which is a symbol) manually for all of them… Very time consuming and “dumb” behavior IMHO.

Edit: The menu has a class which I’m targeting but I still have to set the animations per page…

1 Like
3

@PixelGeek is this something you’re able to shed some light on?

I’ve looked high and low but can’t narrow down a workaround :frowning:

Any help would be super appreciated my friend :smiley:

1 Like
4

Perhaps @webflow support can provide some context on this?

2 Likes
5

Hi @quarshcreative and @fernando1lins, at the moment Page triggers cannot be copy and pasted, those are page specific and you would need to setup those again or duplicate the entire page which will duplicate any page load triggers and give the interactions a new interaction name.

I hope this helps.

1 Like
6

@cyberdave I really hope this is temporary and will be fixed in future. Would be great to Create a symbol that has interactions. I need to create a pop up modal with an x that closes the modal for like 50 pages. So mind numbing to have to do this for each and every page when you should be able to just copy and paste a modal.

3 Likes
7

any update on this? its extraordinarily difficult to re-build some of these animations i.e. page preloaders

4 Likes
8

Do you really need to rebuild them though? Ideally your preload animation is set up inside one interaction and the only thing that you need to do is create on page load animation trigger and select interaction from the list. There may be different use cases of course but if you have a really complex page trigger animation consisting of several different interactions then just duplicate your page when creating a new one.

2 Likes
9

I was moreso referring to a cloned pre-loader. There’s a lot of very cool ones already made.

1 Like
10

Just create any object that will explicitly target this loader ix and copy this object into your project. Then just reuse it as usual.

2 Likes
11

Not sure if I follow but here’s an example: Preloader by CJHersh | Flowbase

Copied the elements over to my new project, but now have to rebuild each IX2 animation.

1 Like
12

There is an ix set up for the page trigger. Here it is

10%20PM

Now to be able to transfer it with the element you need to attach this interaction to an element (duh!). So click any object in viewport, create a new interaction for, say, on click, and select this “new timed animation” from the list. Now just copy thi object. It will transfer the ix along with it.

1 Like
13

Isn’t a page load trigger going to be attached to an element 100% of the time? Hence, the “duh”? So I’m already aware of that obviously, because this isn’t my first time creating page load triggers.

However, they don’t copy. Just like custom code doesn’t copy over.

I just wrapped my entire page in a div and copied it over to another project. Page load triggers didn’t come with it.

Am I missing something?

1 Like
14

Page trigger is not attached to anything but the page.

Sorry, don’t know what’s wrong. After cloning the project and doing the steps I described (making sure you ahve all the elements interaction calls for on the page) it copies alright.

2 Likes
15

I managed to copy interaction by reapplying the interaction on the elements on the page i copied the elements to and it worked. So assuming you created classes to the elements in page A and copied all of the elements to page B (I did it via symbol), then simply re-select the symbol element in page B where you copied it to, go to interactions and select again the interaction you created in page A… it worked for me this way.

1 Like
16

Hi @quarshcreative,

My solution to this has been to apply the Page Trigger Animation to an element in the page, then copy that element to a new page/project and it will bring the animation with it.

This is more a solution for paste Page Trigger Animations across projects.

1 Like
17

Hi @cyberdave,

Is there any plan to use Page Triggers across a website or to attach them to symbol? I can’t use copy/paste because the website was created in 2016 and has about 100 static pages.

I found a workaround using Legacy Interactions but it makes the animation jittery. I guess there’s some frictions between interactions 2.0 and legacy.

It would be really useful if we could attach page interactions to symbols.

Thanks!

Ulysse

2 Likes
18

I’ve just realized how CRITICAL this needs to be applied to a symbol so it can carry over on pages with 50+ pages. Wild that its not available yet is there a request ticket we can all jump on and thumbs up this for development??

7 Likes
19

So I am a noob when it comes to this,…
I have the page loader in one page,… I copied them over to my live site where I’m building V2.
However the preloaded didn’t copy across. How do you say I can still copy it?
https://www.loom.com/share/542db87334314278b202f36ca9fe6a27

1 Like
20

As always with webflow, it will probally get fixed in 5 years time …