-
Posts
-
Hey Enfold,
So, I’m working for a design firm that has a very specific experience that they want for their clients. One thing they didn’t like was the transitions on their portfolio page. So, I got rid of them on this page:
http://support.curlyhost.com/work/
Using this code:
.avia_desktop.avia_transform3d .av-masonry-entry {
-webkit-perspective: none;
-moz-perspective: none;
perspective: none;
opacity: 1 !important;
visibility: visible !important;
}.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
-webkit-animation: none;
-moz-animation: none;
animation: none;
}.avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
backface-visibility: visible;
-webkit-transform-origin: none;
-moz-transform-origin: none;
transform-origin: none;
-webkit-transform: none;
-moz-transform: none;
transform: none;
-webkit-transform-style: none;
transform-style: none;
}.avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image:hover .av-inner-masonry-content {
-webkit-transform: none;
-moz-transform: none;
transform: none;
}.avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
-webkit-transform: none;
-moz-transform: none;
transform: none;
}However, when I click on one of the sort options at the top, the fact that I got rid of the transition and made it visible from the get go, seems to be messing up the order of the sorting and so the stack order is wrong.
How would you suggest I make it so each item loads at the same time (no transitions) but still allows for the appropriate portfolio items to be stacked on top when sorted.
Hey Andrea!
is it working when you remove the code you posted?
Please deactivate all plugins to see which one could cause the issue.
Cheers!
AndyYes, if I remove the code it works correctly, but then I get the transitions back (where the images slowly load on the page instead of just show up all at once). So I need a way so that there won’t be ANY transitions – the images just should load – and then also have the appropriate portfolio categories to show up.
Hey!
Looks like you figured this out. The image animation is not there anymore: http://support.curlyhost.com/work/
Website looks nice. :)
Best regards,
IsmaelHey Ismael,
Here’s a video showing what it’s doing:
http://www.screencast.com/t/f5TkQ3Mp
The image animation is gone, but when I click the categories on the Work page it sorts the projects incorrectly and places the wrong project on top. It’s doing this because of this block of code.
.avia_desktop.avia_transform3d .av-masonry-entry {
-webkit-perspective: none;
-moz-perspective: none;
perspective: none;
opacity: 1 !important;
visibility: visible !important;
}And specifically the {opacity: 1 !important;}
When I don’t have this line of code in there the transition is gone, but each project loads with a couple of milliseconds between them which makes it look like the site is slow, which it isn’t.
Any way to make it so those milliseconds between each project goes away?
Hi!
Please remove all css codes then replace it with this:
.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry{ -webkit-animation: none; /* Safari 4+ */ -moz-animation: none; /* Fx 5+ */ animation: none; /* IE 10+ */ }This should disable the masonry animation.
Regards,
IsmaelHey Ismael,
It’s easier to show than to explain:
http://screencast.com/t/oohigp0l
It seems that that bit of code doesn’t help get rid of the animation…
Also, to recap – here’s the CSS I am currently using to get rid of the animation:
—————————————————————-
.avia_desktop.avia_transform3d .av-masonry-entry {
-webkit-perspective: none;
-moz-perspective: none;
perspective: none;
visibility: visible !important;
}.avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
backface-visibility: visible;
-webkit-transform-origin: none;
-moz-transform-origin: none;
transform-origin: none;
-webkit-transform: none;
-moz-transform: none;
transform: none;
-webkit-transform-style: none;
transform-style: none;
}.avia_desktop.avia_transform3d .av-masonry-entry.av-masonry-item-loaded .av-inner-masonry {
-webkit-animation: none;
-moz-animation: none;
animation: none;
}.avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image:hover .av-inner-masonry-content {
-webkit-transform: none;
-moz-transform: none;
transform: none;
}.avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
-webkit-transform: none;
-moz-transform: none;
transform: none;
}.av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
position: absolute;
bottom: 0;
top: 0;
}————————————
If I were to add this:
.avia_desktop.avia_transform3d .av-masonry-entry {
opacity: 1 !important;
}It would make it so it loads the way I want it to, but that also breaks the sorting that occurs when you click different categories.
Hi!
Can you please remove the codes again then test the other one? It removes the flipping effect animation of the masonry element and it doesn’t mess up the sorting function. I’ll ask the rest of the support team to take a look.
Cheers!
IsmaelHey!
Where is your custom CSS stored? i couldn’t find it neither in Quick CSS nor child style.css.
Best regards,
Josue
- The topic ‘Masonry Transitions Broken’ is closed to new replies.