Scroll interaction inside symbol not triggering on all pages

Design help Animations & Interactions
1

Hello all.

I have created a basic scroll progress indicator at the top of the page, and included it in a symbol (along with my main navigation) that I then throw on each page to create some consistency throughout the site.

The interaction works perfect on the page I created it, and I have selected the interaction be triggered on all elements with the same class, but I still find myself having to go through on each page to assign the animation to the element on each page. Which kind of defeats the purpose of the symbol correct?

Am I missing something here? Is there a way to make sure that same interaction is active wherever I throw that symbol on a page or template? Or do I have to go through and manually assign the trigger to each page.

Thanks in advance for any help.

Here is my public share link: https://preview.webflow.com/preview/srqyou?utm_source=srqyou&preview=7f37a4b20d740b41ccfc282e6384556d

2

Found the answer. Seems silly that the interaction carrying over from page to page would not be automatic.

At the moment, it’s not possible to reuse page interactions. You’ll need to apply page triggers on each of your pages. However, you can set the animations to target the class of an element so you can reuse them on each page.

  1. Set the page trigger(s) on the first page and create your animation(s). Make sure you target the class and not the selected element.
  2. Go to each page, add the page trigger(s) and select the animation(s) you’ve already created.
2 Likes
3

We dealt with this issue in a client project and created a script that allows you to use a page scroll progress bar on a single page or your entire site.

Here is a link to the tutorial video that walks you through the question, and then the solution from start to finish.

If there are any questions please feel free to tag me!

Happy Saturday!