Why does the text load before the border on my interaction?

Design help Animations & Interactions
1

I’ve followed the video tutorial for the click to show interaction, but when I recreate it it doesn’t work properly.

The border of the hidden paragraph element displays with the ease, but the text shows immediately without honouring the ease.

I have tried with several variations, such as putting the paragraph element within a div and setting the interaction to affect the div, rather than the paragraph, but get the same result.

Here is the public link

https://webflow.com/design/test-site10300926?preview=a0544de7b4a498d5110af43f03c39612

Any help much appreciated

2

Because your element does not have the overflow:hidden property, so its content shows up entirely when you display it. So set it to overflow:hidden.

1 Like
3

Magic. Thanks once again Vincent.