Bulma Modal FX

A set of modal window effects with CSS transitions and animations for Bulma. Very inspired by this Codrops resource/article https://github.com/codrops/ModalWindowEffects

Demo: https://postare.github.io/bulma-modal-fx
Bulma docs: https://bulma.io/documentation

Effects

class modal-fx- + effect
example: modal-fx-newsPaper
- normal
- fadeInScale
- slideRight
- slideLeft
- slideTop
- slideBottom
- fall
- slideFall
- newsPaper
- 3dFlipVertical
- 3dFlipHorizontal
- 3dSign
- 3dSignDown
- superScaled
- 3dSlit
- 3dRotateFromBottom
- 3dRotateFromLeft

$3

https://postare.github.io/bulma-modal-fx/

INSTALL

npm i bulma-modal-fx

or simply download latest release: https://github.com/postare/bulma-modal-fx/releases/

GETTING STARTED

Include the plugin css file:

``html

`

(optional) Include the plugin just before body closing tag:
`html

`

Or use a CDN

`html

`

`html

`

$3

`html

Open modal

[...]
`

Bulma documentation on modal

$3

Class modifiers for .modal:

- .modal-pos-top: modal positioned on top
- .modal-pos-bottom: modal positioned on bottom

Class modifiers for .modal-content:

- .is-huge: 100% width modal
- .is-tiny: 400px width modal
- .is-image: if the content is an image

$3

`scss
// Modal minimal setup
$transition-duration: .3s;
$transition-duration-newsPaper: .7s;
$transition-duration-3dslit: .5s;
$modal-perspective: 1300px;
$modal-bg-color: rgba($black,.86);
``