Show\hide animation glitching on first play

Design help Animations & Interactions
1

Hello!

I have built a show/hide interaction into my site that is not working correctly.

In my animation I have specified an opacity fade that smooths out the show\hide. The show/hide function works just fine however the problem is the fade. This only works after the animation has played once before.

This fade animation does NOT work on the first play. But in subsequent plays, the fade animation works perfectly.

I have followed this tutorial to the letter - several times - and I am getting the same result.

In order to play the animation, please click on the blue box.

Any help or suggestions much appreciated!

Thanks

Here is my webflow.io link >> https://portfolio-2022-c02397.webflow.io/

Here is my read only link >> Webflow - Portfolio 2022

2

@samfredrowe - it’s the initial state opacity in your closing interaction:

image

This is setting the initial state of your modal to have 100% opacity therefore preventing the fade-in effect on the first loop.

Just delete that first step in your animation on the close-project-01 action.

3

@sam-g

Amazing! Thank you so much! :pray:

Works perfectly now. :+1: