Add animation
I'm trying to add a simple animation to page content when it loads, targeting the class main. This works all well and good but it disrupts the image zoom overlay (the images don't display in the lightbox).
Is there any way to target this div but ignore the native zoom effect? I don't know much about the zoom effect stuff but wondering if there's a way.
.main {
opacity: 0;
transform: translateY(10px);
animation: fadeInMoveUp 0.3s ease-out forwards;
}
@keyframes fadeInMoveUp {
to {
opacity: 1;
transform: translateY(0);
}
}
Please can you share a link to your site, either here or via email? I'll take a look at the specifics, I'm having a hard time working out the cause of this issue
Answered 4 months ago · Edit answerWanted to close this out (David helped me async).
The native zoom lightbox stuff was conflicting with the above animation CSS. In order for them to play nicely, I had to first disable the image zoom toggle on Blot's dashboard (publishing settings, "add zoom to large images"), then add the CSS and JS files for the zoom stuff manually to my template files (available here: https://github.com/spinningarrow/zoom-vanilla.js/).
With this installed, however, it won't honor the zoom="false" added in the markdown image notation, so I had to switch them to html <img> tags in my files. Either way, it worked! WOOT