ska-dev

Looks like there is a conflict with the “Stackable – Page Builder Gutenberg Blocks” plugin.

You have the animation applied to the plugins’ “Heading” block, which has CSS:

transition: var(--stk-transition-default);

which overrides the AOS CSS:

transition-timing-function: ease-in;

making the animation not work properly.

To work around it you can insert the Animation container block, put the Heading block inside of it but remove the animation from the Heading block and apply the animation on the Animation container block instead.

So instead of:

• Heading – Fade Animation

you should have:

• Animation container – Fade animation
  • Heading – No animation

Let me know if that makes sense.

Is it possible to disable Lenis for this page only?

Yes, you can use the following snippet in your child theme’s functions.php, replace the 123 with the ID of the page you want to disable Lenis on:

add_action('wp', function() {
	$disable_lenis = is_singular() && get_the_ID() === 123;
	if($disable_lenis) {
		add_filter('option_animations-for-blocks', function($value) {
			$value['lenis'] = 'off';
			return $value;
		});
	}
});

I open a Fancybox pop-up with HTML content and a scroll bar in this pop-up.
The scroll bar no longer works; I think Lenis is capturing the scroll.

Lenis itself has workarounds for this also: https://github.com/darkroomengineering/lenis?tab=readme-ov-file#considerations

So you should be able to fix it if you are able to add a data-lenis-prevent attribute to the scrollable content element in the pop-up or you can try by modify the Lenis JS config by assigning the window.anfbLenisSettings JS variable:

add_action('wp_enqueue_scripts', function() {
	wp_add_inline_script(
		'anfb/lenis', 
		"window.anfbLenisSettings = { autoRaf: true, prevent: node => !!node.closest('.fancybox__dialog') };",
		'before'
	);
});

The animations on your test site work for me, so you also probably have prefers reduced motion enabled on your computer.

I’m not sure why the snippet isn’t having an effect for you though.

But it’s recommended to turn prefers-reduced-motion setting off rather than use the snippet – ask an AI how to do it, it will give you different places to check, depending on your OS and browser. It could also be enabled in Chrome dev tools: https://i.imgur.com/SpnclNP.png

Add this snippet to a Custom HTML block on any page, it will tell you whether the setting is on or off:

<style>
.test-notice {
	padding: 1rem;
	margin-block: 1rem;
	color: white;
	border-radius: 4px;
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.test-notice[data-enabled=true] {
		display: block;
		background-color: red;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.test-notice[data-enabled=false] {
		display: block;
		background-color: green;
	}
}
</style>
<div class="test-notice" data-enabled="true">Reduced motion is enabled, animations won't play.</div>
<div class="test-notice" data-enabled="false">Reduced motion is not enabled, animations will play.</div>

Here’s another PHP snippet (for child theme’s functions.php) that can change the plugin’s default behavior though:

add_action('init', function() {
	if(defined('WSD_ANFB_AOS_HANDLE')) {
		wp_deregister_style(WSD_ANFB_AOS_HANDLE);
		wp_register_style(
			WSD_ANFB_AOS_HANDLE,
			plugins_url('build/aos.css', WSD_ANFB_FILE),
			[],
			WSD_ANFB_VER,
			'screen' // Override 'screen and (prefers-reduced-motion: no-preference)'
		);
	}
}, 11);

Looks like it’s working to me.

Does your browser/device perhaps have prefers-reduced-motion enabled? In which case the the animations won’t play.

Thanks, should be fixed in latest version.

I think it’s happening because some optimization plugin is moving the aos.css file to the end of the body, so it fails applying the initial opacity: 0 CSS rule to the element before it has rendered, so the element appears as visible, then tries to fade out (which now takes 1.7s due to the animation duration), and then the animation is triggered and it has to fade in again, so it just ends up doing an awkward flicker.

You can try to exclude aos.css from being moved away from the <head> and make it render-blocking, or if you don’t want it to be render-blocking you could try to manually apply opacity: 0 to the element so that it starts from this state.

Animation happens when the element is scrolled into view. If you enable Advanced settings -> Mirror, then reverse animation will happen when scrolling past it.

To animate out while the element is still in view you would need to manually remove the aos-animate class from the element with JavaScript.

All the animation are made to appears, unfortunately, none to disappears.

That is true, for example this is the CSS for the fade animation:

html:not(.no-js) [data-aos^=fade][data-aos^=fade] {
	opacity: 0;
	transition-property: opacity, transform;
}

html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate {
	opacity: 1;
	transform: none;
}

If you were to add custom CSS to reverse the opacity:

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

html:not(.no-js):not(#_) [data-aos^=fade][data-aos^=fade].aos-animate {
	opacity: 0;
}

then I it would animate and disappear, but overall the AOS library is not well suited for it. But what it essentially does is add the aos-animate class to the element when it’s in view and remove it when it’s no longer in view (with “mirror” enabled), so with custom CSS you technically can target specific elements to animate however you like based on that. At that point it’s probably better to use GSAP or something though.