Menu icon Foundation
Reveal Modal with CSS3 Animations?

I've searched high and low, and can't seem to find any mention of using CSS3 animations (scale, easing, etc) with Reveal. I'd like to replicate some of these examples (http://tympanus.net/Development/ModalWindowEffects/), particularly the first one, "Fade In & Scale".

Has anyone accomplished this with Reveal? Any tips?

revealmodalFoundation

I've searched high and low, and can't seem to find any mention of using CSS3 animations (scale, easing, etc) with Reveal. I'd like to replicate some of these examples (http://tympanus.net/Development/ModalWindowEffects/), particularly the first one, "Fade In & Scale".

Has anyone accomplished this with Reveal? Any tips?

Dennis Haulund Nielsen over 5 years ago

Hi Derek

I have more or less successfully implemented CSS3 animations for the Reveal modals.

You need to make sure you have the latest version of Foundation (5.0.3 as of this post) since it included a fix for the modals staying locked when animation is set to none during setup.

I have made a commented example on jsfiddle you can checkout:

http://jsfiddle.net/dennishn/hzPMZ/2/

A colleague and I have also been looking into doing CSS animations on:

Tabs: http://codepen.io/dennishn/pen/GnFLz
Accordions: http://codepen.io/dennishn/pen/hbLAJ

Derek Johnson over 5 years ago

Dennis, if you ever come to Florida, I will buy you a beer.

Dennis Haulund Nielsen over 5 years ago

Noted! ;)

Glad I could help.

Ryan Blaind almost 5 years ago

Hey Dennis,

I was trying to get this working as well. It seems like your original jsfiddle for the reveal animations is no longer working properly. Would you be able to take a look and update it?

Thanks in advance !

Pete Ottery almost 5 years ago

+1

keen to check out if the reveal animations can be made to work again on jsfiddle. I know very little about JS. as an aside - curious to know how the jsfiddle could stop working over time? unless something else in it was edited i guess...

thanks, pete