Page load animation breaks layout on mobile

Design help Animations & Interactions
1

Hi there!
Working with mobile break point is super intuitive, but I just ran into an issue:
I’m using a page load interaction which animates all the elements on my page.
I use Inital State Actions to position them correctly.
However, these animations break the layout on mobile devices, so I tried turning them off.
As you can see in this image, turning off the interaction for certain screen sizes, doesn’t affect the Initial State though, which still breaks the layout.

48

Any idea on how to fix this?
Check my public link to a preview, switch to the mobile view though.
Thanks in advance!

Here is my public share link: LINK
(how to access public share link)

2

You should contact support directly for this one. I bet you’ll need a quick workaround to keep the project moving.

3

Thanks again for you time @garymichael1313 I’ll contact them right away.

4

No problem, take care.

5

If I understand your problem correctly, my solution is to make another interaction set for just mobile landscape and portrait that sets the initial state correctly for mobile view.

6

Hi @natespell @aaleks

Yes. I would suggest duplicating your interactions and set the initial state differently for each break point.

Or you can use percentages instead of fixed pixels.

Hope this helps :slight_smile:

7

Thanks @natespell and @PixelGeek I’ll try that out, didn’t think of that!

Update:
Okay, now it’s working - however, there is still one issue:
The separate Page Load for Mobile now handles the intro animation. But unfortunately, the layout breaks if you start with desktop and then switch to mobile (see link, ‘Cities Template’ page). In real life this wouldn’t happen often, but it seems a little hacky.

Any suggestions on how to fix this?