-
Posts
-
Hiya,
For more serious websites I would like to drastically reduce the animation effect when a gallery first displays.
What do I need to change avia.js ?Also when the theme is updated, is there somewhere I can make this change in the CHILD theme so that this isn’t over-ruled with each update?
Thanks
Hi ColinWalton!
Thank you for using Enfold.
Add this to the Quick CSS field to disable gallery animation:
.avia_transform .avia-gallery-thumb img { opacity: 1 !important; -webkit-transform: scale(1) !important; -moz-transform: scale(1) !important; transform: scale(1) !important; }Best regards,
IsmaelHiya,
That’s much better. THANK YOU.
Is there anyway to stop the zooming effect on load as well?Colin
Hi!
add a pointer-events: none; into Ismael’s code:
.avia_transform .avia-gallery-thumb img { pointer-events: none; opacity: 1 !important; -webkit-transform: scale(1) !important; -moz-transform: scale(1) !important; transform: scale(1) !important; }Regards,
AndyHiya,
I’ve tried this but it doesn’t seem to make any difference. I want to get rid of ALL the zooming when the pages are loaded or the images rolled over or clicked.
http://levickjorgensen.com/brochure/
When the page loads each image does a zoom effect, which feels a bit too gimmicky for this client.
Any other ideas?
Hi!
Try this:
.avia_transform .avia-gallery-thumb img.avia_start_animation { -webkit-animation: none; -moz-animation: none; animation: none; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }Cheers!
IsmaelHi Ismael,
Thank you that looks much better. The important thing to stop was all the zooming which has now been killed.
What now happens is that all the pictures load in turn starting small then enlarging to fit the space. Is there a way to ease the opacity in slightly so softening the effect a little?
I am used to images loading instantly, so if there has to be a delay I would like it to be as subtle as possible.
This is the test page I am using it on. http://id.waltoncreative.com/upholstery/
I have taken off all my other CSS styling and only put on the script below:
.avia_transform .avia-gallery-thumb img.avia_start_animation {
-webkit-animation: none!important;
-moz-animation: none!important;
animation: none!important;
opacity: 1!important;
-webkit-transform: scale(1)!important;
-moz-transform: scale(1)!important;
transform: scale(1)!important; } /*as sent by Ismael to stop the animation of the slideshows when loaded / rolled over*/Thanks for all your help!
Hey!
I’m sorry but I can’t reproduce the issue on my installation. The gallery images show instantly when the page load.
Cheers!
IsmaelReally? how odd. I have fibre optic broadband so would have thought it would be the same speed as you would have there?
Thanks for trying anyway.
Hi
I have a related question. Across my site, I’d like to achieve the same effect as on the site below. Can you kindly explain how to do this. Essentially on any section it seems, they have a very subtle slide up as each section scrolls into view, The settings I tried have give too much movement and isn’t appropriate in our case.
Thanks very muchHi,
Thank you for the inquiry.
Which animation would you like to modify? Color sections do not animate by default, so you might be referring to a different element. Most of the animations are defined in the css > layout.css file around line 2157. You could modify those animations by copying them in the Quick CSS field or the child theme’s style.css file.
Best regards,
IsmaelHi Ismail,
I would like to know how to duplicate the animation effect in the site I gave. How to achieve that? I haven’t set any animations yet. I assume on that site, they animate what Enfold calls a section or a full width row or element. If you browse that site, you will see what I mean. As you scroll down any of their pages the next full width section or element very slightly animates as it comes into view. I want to duplicate that. They’re not animating any specific thing like some text, an image, a column on some spot on a page.
Thanks.
Hi,
Thank you for the inquiry.
Some of the elements in the Advance Layout Builder including the Column elements contain an Advanced > Animation settings by default, which can be used to create different transition effects. You could place text, image or any builder elements inside those columns and enable the animation to create the desired transition effect.
Best regards,
IsmaelHi Ismael, thanks for your message. I have seen those settings of course, but movement and animation from that is too much. How do achieve the very subtle animation as on that site I gave you in the private section, listed below again, i.e. how exactly do I adjust the speed and amount of slide up animation in the ALB to get that effect, or what other way to do that? Thanks and regards
Hi,
As we mentioned above, you have to modify the existing animations in the theme. Unfortunately, we cannot exactly replicate the animations from the other site because of how the transitions are implemented, so you will have to use the existing animations from the theme and do your own adjustments.
To adjust the fade in effect for example, you have to modify the css > shortcodes.css file around line 784 and copy this animation or keyframes around line 748 , and place it in the Quick CSS field or in the style.css file and do your own modifications.
@-webkit-keyframes avia-fadein { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes avia-fadein { 0% { opacity: 0; } 100% { opacity: 1; } }To adjust it even more, you have to override the default animation property.
.avia_transform .avia_start_delayed_animation.fade-in { -webkit-animation: avia-fadein 1.5s 1 ease-out; animation: avia-fadein 1.5s 1 ease-out; opacity: 1; }You could adjust the animation duration and timing-function to achieve different variation of the effect.
// https://www.w3schools.com/css/css3_animations.asp
Best regards,
Ismael
- You must be logged in to reply to this topic.