Streaming live at 10am (PST)

Animations and devices

I don’t really get it. So only one trigger with different actions per page?

Daniel

Depending on your definition of trigger. As I’ve said you shouldn’t affect the same element with different ix that is all.

1 Like

Ok. Thanks.

Dram… do you know why I don’t see these tools/settings in the Designer? Is it a future update? The version for Mac?

Thanks,

Daniel

This is old interactions interface. You should look here for the v2 of the ix.

1 Like

Thank you very much for your help.

So did you resolve your initial question?

1 Like

Not really. I guess I’ll have to get deep into the trial and error process. :frowning:

But thanks for asking!

Where do you have problems though? Your question of “how to go about changing animations for different devices” was answered here. Did you have any other questions that you didn’t mention in your first comment?

Hi dram,

If you look at the thread, I asked something to Pablo_Cortes. That is where I explain what my real problem is. Sorry, but your answers are a bit too generic/fuzzy/ambiguous for me. You are an expert, but I’m not.

Daniel

You shouldn’t use display settings to hide your elements (that’s what Pablo suggested) but rather use visibility control for the interactions itself. For each breakpoint you can use different interactions specifically created to work correctly on this breakpoint.

1 Like

Hello @Daniel_Mad and @dram,

Sorry @Daniel_Mad I didn’t understand your question initially, I thought you wanted separate animations for desktop and mobile. @dram your are correct I forgot the visibility control part of the interactions settings. In any case though I thought Daniel was looking for two different animations, I now understand that he wants just one animation triggered appropriately for each break point. So I think the real issue that Daniel has is the responsiveness of his design to be able to have an animation that works on all breakpoints. Daniel I suggest you to rebuild your home hero with the box model https://www.youtube.com/watch?v=MrAnu4zdjjY because right now it has some settings that look unnecessary to me, maybe that is the way you want them but I think they are giving you a hard time making your animation responsive on all breakpoints. For example this setting on your “Hero H1 top” heading.
19%20AM
I think that instead of that you need to use flex on the parent element and achieve the same result that will be more responsive.

1 Like

Thanks to both of you. I’ll take a look at how visibility control for interactions and the box model work.

Would you guys mind taking a look at this?

Thx!

Daniel

@Daniel_Mad, your offset is at 100%, try it at 50% and see if that works with what you are trying to accomplish.
13%20PM

2 Likes

Works great, Pablo.

Thanks a lot!

BTW… do you speak Spanish? I’m from Spain.

Hey @Daniel_Mad, no worries man.
I do! Im from Bolivia but I live in USA. Si tienes mas preguntas mandame un mensaje y voy a tratar de contestarte lo mas pronto que pueda. Mucha suerte en tu projecto.

1 Like

Great, Pablo. Highly appreciated!

So… to go back to the box model… which elements should I use? DIV boxes nested inside other DIV boxes? Or is there another, better approach?

And something else… the screenshot from my project you posted before (with the 50vh top and 5 vw left margins)… How would you do the same with flex? I mean, how do you control those exact margins?

Thanks again,

Daniel

@Daniel_Mad,

So for the box model, look at it this way, you have headings that are “sitting” on a section, in order to array them however you want it is always better to put them inside a container, it could be a div block or a container, but once the headings are inside a “box” you can then move that box with more flexibility. Flex it is a good start for boxes inside a container, it allows you place boxes in the middle, aligned on top, bottom, left or right.


on the picture above you had a heading with a margin of 40vh, instead why don’t you place your headings inside a div block and give that div block a margin or a flex position of aligned to the bottom?
You will have to do a lot of trial and error to see what really works best for your design. I suggest you to look at the webflow university tutorials on layout, they will help you a lot with the best practices for responsive design.

1 Like

Wonderful, Pablo. Thanks a lot for your lengthy explanation. Highly appreciated. I will do as you suggest.

Daniel

1 Like

Hi Pablo,

I gave this example a look and, as you see, I’m using a DIV for the headings. And if I use flex for the DIV everything falls in the wrong places.

Inside this DIV there are three different headings and the arrow. Each of these elements is affected by a different interaction.

So I don’t really see how could your approach help. Or why should I use it. I suspect it is all about “good practices”, but I don’t really get it.

Should I nest DIVS within DIVs? One heading per DIV? Anything else?

Daniel

Hello @Daniel_Mad ,

There are so many variants, what display you are using, positioning of the element with relation of its parent element, position of the element, padding, margins, etc. If the way you build it works for your design then do it that way. I was just saying that to avoid issues with responsiveness and to save time, the box model works pretty well. It is hard for me to give you an advice if I don’t really know what your design looks like, like do you really want that space from your navbar to your first heading? Do you want to align the “Heading” with the down arrow? You should place multiple elements inside containers as it suits your design. Good luck.

1 Like