Nav Fade animation only plays once

Design help Animations & Interactions
1

Hello! First time poster here, I’m in love with Webflow and the tools it’s giving me to design my own portfolio website.

I’ve got a great start so far, and I’ve created a side bar nav that expands when you click it and the content fades in from 0 opacity to 100, so far so good. the problem comes in after you close the nav and RE-open it, the content is stuck at 0 opacity and wont re start the animation like it should when I activate the trigger which is ‘open nav’.

any ideas?

also, if you don’t mind while you’re looking, the nav menu open / close in general seems buggy. it works perfectly some times and then others it breaks just by clicking it like I’ve been doing. Idk if I built my animations wrong or what. Also sometimes it just doesnt work on the first page load, and you have to click the preview button two or three times to get it working. not sure if thats my fault either.

Thanks in advance!!

Here’s the read only link : https://preview.webflow.com/preview/alexanders-first-project-eadf69?utm_source=alexanders-first-project-eadf69&preview=63a453e904dfac855e1b352651025206&mode=preview

Here is the live published site: https://alexanders-first-project-eadf69.webflow.io/

2

Hi Alexander,

The problem is that ‘initial state’ applies only once- on page load. So when you click to close your menu, and not setting all the opacity and positions to the elements inside, you are creating a mess :smile:

Add all the properties you have in the initial state on the ‘About fade in on nav open’ interaction, to the ‘about fade out nav close’ interactions end.

3

Thanks so much for your reply!

5

I got it to work by removing the ‘initial state’ setting all together :slight_smile: thanks

I thought about it and when you said it only applies on page load it started to make sense.

1 Like