• Thanks for a great plugin!
    Is there a way to make a zoom effect more subtile? Simply put, I want less zoom effect. How can I control that? Is there a filter I can use or can I change some parameters in the code?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author websevendev

    (@websevendev)

    You would have to override the CSS of the animation library.

    For example by default the Zoom in animation scales the element down to .6:

    html:not(.no-js) [data-aos=zoom-in] { transform: scale(.6); }

    For a more subtle zoom you can start at like .9 by adding this to your Customizer -> Additional CSS:

    html:not(.no-js) .subtle[data-aos=zoom-in] { transform: scale(.9); }

    and add the subtle class to the element that you need more subtle. I put them side by side in the Columns block and the one with .subtle class is indeed more subtle. Or you can omit the class from the CSS rule and have them all be more subtle by default.

    Thread Starter mats1

    (@mats1)

    Many thanks for a quick respond.
    Yes! This works great. But if I would like to make the Fade options more subtle, how should I do then? When looking in the css that you referred to I see that the css for the Fade options looks a bit different.

    Plugin Author websevendev

    (@websevendev)

    Fade starts at 0 opacity and animates to 1, but starting at 0.5 would be more subtle:

    html:not(.no-js) .subtle[data-aos^=fade] {
    	opacity: 0.5;
    }

    Also for directional fades the distance is by default 100px but you could reduce it:

    html:not(.no-js) .subtle[data-aos=fade-down] {
    	transform: translate3d(0, -50px, 0);
    }
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Make the zoom effect more subtile’ is closed to new replies.