-
Posts
-
Hi, I was wondering how to use the animation that is on the masonry gallery, but in a layout element? I would be applying it to a number of items that could all be in a color box. I like that flip up / perspective effect, but I wanted more control for fonts and styles than is available in the masonry gallery.
Hey empiread201,
Please enable custom CSS class name support from Enfold theme options > Layout Builder > Developer options
Add a unique class name to the elements you want to animate and use the CSS provided in this link https://kriesi.at/documentation/enfold/animation/ or you can simply google for code snippets that suits your design.
Best regards,
VinayHi, I’m having trouble making it work. I’m not super savvy with custom css, but I’ve enabled the custom CSS class names and named the image “product_animation”. I was able to find the css in shortcodes in the animation sections and believe this is the masonry gallery animation. I input the class and then nested the animation inside brackets, like so:
( but I’m not sure if this is correct ).product_animation {
@-webkit-keyframes .avia_msonry_show {
0% { -webkit-transform:translateZ(300px) translateY(200px) rotateX(-70deg); opacity: 0.1; }
100% { -webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}
@keyframes .avia_msonry_show {
0% { transform:translateZ(300px) translateY(200px) rotateX(-70deg); opacity: 0.1; }
100% { transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}
}Hi,
The css code should look something like this.
.product_animation { -webkit-animation: avia_msonry_show 1s 1s linear; animation: avia_msonry_show 2s 1s linear; }// https://www.w3schools.com/css/css3_animations.asp
Best regards,
IsmaelSorry, I’m a little confused. If that’s an example, am I supposed to combine that with the code I found? The code you included by itself doesn’t have that flip up perspective that the masonry gallery has.
Yes, I tried the code – it was animated, but it was not the animation that is in the masonry gallery. It just started out squished and got larger inside the element like a marshmallow being squished and then regaining it’s shape.
I’m including a private link to the site. The product gallery at the top has the custom css and if you scroll down there is a second gallery that is made with the masonry gallery that has the animation I wanted.
Hi,
Please try this code:
#top .product_animation .flex_column_table_cell{ -webkit-animation: avia_msonry_show 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075); animation: avia_msonry_show 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075); }Best regards,
PeterIt’s still not working.
Does it matter where I’ve got the custom CSS class? I’ve got a color section and inside it are 1/4 page elements with an image and text box in each. Right now I’ve go the “product_animation” class in the 1/4 page elements – in order to have the whole box animated. I tried adding it to the color section and the image itself, but I didn’t notice anything different.
Hi,
If you’re using Dude’s code, you should add the custom css class attribute to the color section element where the columns reside.
Or use the following css code and then apply the custom css class attribute to the column elements.#top .product_animation { -webkit-animation: avia_msonry_show_mod 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075); animation: avia_msonry_show_mod 0.8s 1 cubic-bezier(0.175, 0.885, 0.320, 1.075); } /*pop up animation*/ @-webkit-keyframes avia_msonry_show_mod { 0% { -webkit-transform:translateZ(300px) translateY(200px) rotateX(-70deg); opacity: 0.1; } 100% { -webkit-transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } } @keyframes avia_msonry_show_mod { 0% { transform:translateZ(300px) translateY(200px) rotateX(-70deg); opacity: 0.1; } 100% { transform:translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } }Best regards,
Ismael
- You must be logged in to reply to this topic.