Menu icon Foundation
Data animation on reveal

I setup a gallery were I have a loe res image showing when user click on the image a higher res image reveals. It works perfectly fine, but I set the data-animation-out when I user close the reveal the page do not want to scroll anymore and user have to refresh the page, but if I remove the data-animation-out and jus use use the data-animation-in  the page scroll normal when closing the reveal. that is very strange....

 

Testing page

 

I'm using foundation ZURB-Template 6.5.3

 

HTML CODE

 

 <div class="reveal large" id="image{{@index}}" data-reveal data-animation-in="gallery-in" data-animation-out="gallery-out">
        <button class="close-button" data-close type="button">
            <span aria-hidden="true">&times;</span>
        </button>
        <img class="modal-img" src="{{this.url}}" alt="">
</div>

 

CSS CODE

.gallery-in {
    @include mui-animation(slide(in, down), fade(in));
    animation-duration: 1.5s;
}
.gallery-out {
    @include mui-animation(slide(out, up), fade(out));
    animation-duration: 1.5s;
}

muidata-animationrevealzurb-templatefade-in

I setup a gallery were I have a loe res image showing when user click on the image a higher res image reveals. It works perfectly fine, but I set the data-animation-out when I user close the reveal the page do not want to scroll anymore and user have to refresh the page, but if I remove the data-animation-out and jus use use the data-animation-in  the page scroll normal when closing the reveal. that is very strange....

 

Testing page

 

I'm using foundation ZURB-Template 6.5.3

 

HTML CODE

 

 <div class="reveal large" id="image{{@index}}" data-reveal data-animation-in="gallery-in" data-animation-out="gallery-out">
        <button class="close-button" data-close type="button">
            <span aria-hidden="true">&times;</span>
        </button>
        <img class="modal-img" src="{{this.url}}" alt="">
</div>

 

CSS CODE

.gallery-in {
    @include mui-animation(slide(in, down), fade(in));
    animation-duration: 1.5s;
}
.gallery-out {
    @include mui-animation(slide(out, up), fade(out));
    animation-duration: 1.5s;
}