▼
Streaming live at 10am (PST)

Animation broken in published site but works in animation preview

Design help Animations & Interactions
#1

By preview I don’t mean site preview, I mean the preview you can click when building the animation.

also I’m only talking about mobile size here, so scale the browser down to mobile size, I haven’t built it for desktop yet.

it’s the nav expansion, you click the hamburger and the nav opens. For a little context, I copy / pasted the structure of the nav from another project I did. But to ensure the animation didn’t have any hiccups I re-did all the animations by hand. But now I’m having the issue where when you expand the nav, one of the hamburger lines moves like 400px to the right. But no where in the animation do I have a move set for that element to 400px. When you preview the animation it works perfect. But when you publish site or do a site preview, it’s broken. Any ideas?

live site: https://new-381257.webflow.io/#1

read only: https://preview.webflow.com/preview/new-381257?utm_medium=preview_link&utm_source=dashboard&utm_content=new-381257&preview=58e3d92ba9aa606e11dfc81674428e51&mode=preview

#2

Hi

Sorry to disappoint but it is not working in the Preview either

#3

Here I recorded My screen. btw - the Hamburger menu is hidden in your read only link

#4

really? it works for me in preview. ( not site preview, animation preview ) but either way, do you see how its knocking the hamburger line way to the right? where is that coming from?

@shokoaviv

#5

Yeah that’s how its breaking, its kicking the hamburger line all the way to right.

Those are only desktop and tablet views you were checking btw, so far I’m only working in mobile size, desktop and tablet aren’t built yet. But yeah, same issue I guess.

@shokoaviv

#6

Your site is showing lots of errors in the browser console (chrome current). You can address them by following the steps provided here.

#7

Hi

for the “HamburgerSquare” use those parameters as in the image below:

31
Screenshot 2019-07-24 03.45.31.png256×878 26.6 KB

for the three lines of the burger menu use the same class with the parameters below:

48
Screenshot 2019-07-24 03.45.48.png322×793 23.9 KB

Then use A combo class for each line of the burger menu (HamburgerLine1, HamburgerLine2, HamburgerLine3) - so you can apply different interaction on each line. Use interactions to rotate 2 lines to achieve X for close button. Hope it help :slight_smile:

#8

thanks for the info @webdev

#9

Hi I solved this issue by logging out, log in again, publish.
In my case Webflow also asked for a password change, don’t know why.
Anyways it worked.