Interactions media query

Design help Animations & Interactions
1

I’m courious about how to make my complex animation working in different ways in other views. I created a complex animation and it works fine. I tried to fit this for the other media queries, but …

  1. As I don’t want to start from scratch, I duplicated my animation and defined the original to just work in desktop view and the copy just in tablet view
  2. Trying to connect the duplicated animation to the same trigger element is releasing the connection to this element in desktop view, what makes no sense.
  3. Trying to duplicate my whole trigger section with all elements and make it just visible in tablet view is possible, also connecting it to the duplicated animation, but then the duplicated elements are no longer connected to the duplicated animation.

Is there a solution? Or do I have to start from scratch for all other views? This would be a bunch of work to do, as I would have to rebuild about 30 animations for 15 elements and all three small views.

Any help is appreciated.

Cheers Harald

2

Hello @pupinko

Interactions 2 is quite complicated to understand and work with when you want to do those kinds of things as attaching the same interaction to different elements.

I honestly don’t know what would be your best option here. Maybe @vincent can help you a little, he was talking about the same thing a few days ago I just can’t find the post.

3

Hi @aaronocampo thanks for your reply …

I’m getting crazy meanwhile, as I counted my steps in the animation and it’s containing 72 single steps from 23 elements, means 300 adjustments anyway PLUS starting from scratch with any view … aaaaaarghhh.

4

Yeah I completely get it. Do you think that maybe adjusting the elements affected by the animations for those other queries would help? Instead of creating an animation for each one?

5

Surely, i was thinking about that by using vw instead of px. Still not sure, if this will work.

See here the line animation in the fourth section:

http://neat-group.webflow.io/de/loesungen/novo-digitale-welt

6

I’m not seeing any line in the fourth section :thinking:

7

sorry, it was switched off, it’s fixed now.

8

That is a great animation! I see what you mean.

Here is an idea, why not duplicate the section and for mobile queries use legacy interactions? and leave this awesome one for desktop experience.

9

Hi @aaronocampo,

still not sure, if this will work at the end, but I found a way, how not to loose the connection between elements and animations. Duplicating the page is also duplicating the animations and still keeping the connection to this duplicated animation. Copying back the concerned section to the previous page and connecting it there to the duplicated animation is working fine. So I will try to solve it like that.

So it seems to be a workaround …

1 Like
10

Was just a dream, it was doing wired things incl. disappearing of elements and can’t redo this process until now.