Streaming live at 10am (PST)

Animations and devices

Hi,

I’m trying to understand how to go about changing animations for different devices. What do I have to do if I want to use a different animation for mobile? Not to mention that the elements in phone landscape and portrait share the same tags, but need to be smaller for portrait.

Thanks,

Daniel

https://preview.webflow.com/preview/test-3654d9?utm_medium=preview_link&utm_source=designer&utm_content=test-3654d9&preview=8d5743446a8781fc7ff3ac8722d3d7a7&mode=preview

Hello @Daniel_Mad,

So if you want to use different animations for specific break points you have to select where you want your animation to show. In your case you have to select the animation you have for desktop in the mobile designer and select display none
10%20PM
That way your animation will still show on desktop tablet and mobile landscape, but it will not show on mobile portrait. Additionally, once you build an animation for mobile you have to make sure that the new mobile animation only shows on mobile portrait by doing the same thing you did for the desktop animation. I hope this makes sense. Let me know if you have more questions.

Hi Pablo

Thanks for your answer. But the question is… if you need to use the same DIV (I mean, use the same space/position in the same page) for both animations, how do you do that?

If you look at my home page, there’s a little animation going on with three lines of text and a little arrow. All of these elements become smaller for tablet and even smaller for phone (and even smaller for phone portrait). The position of the elements also change from device to device. But I donb’t understand how can I place the same elements in the same area even if the ones I have now are not being displayed.

Maybe there’s another way to do that?

Thanks,

Daniel

You can set up your ix to fire on certain breakpoints and not fire on other. So you may create several different interactions/animations and then fire them only on those breakpoints that you need them.

Hi Dram,

What is ix?

And another question, if you don’t mind… Can one have different triggers (and different actions in each trigger) affecting simultaneously the same elements or the same page? I ask this because I see a little white round symbol (meant to be ON) next to one trigger only. The other ones are OFF. And you cannot turn on more than one.

Thanks a lot!

Daniel

ix means interaction. You cannot affect the same element with different ix. Or you can but it may (and most likely will) lead to buggy animations. You may put the elements you need to target inside parent divs and target those.

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.