websevendev

Yes I can reproduce it, thanks. I’ll take a look.

What theme and plugins do you have? Are you able to reproduce the error in the WordPress playground?

Breaks it how?

Here it is in 6.4, seems to be working: https://playground.wordpress.net/?plugin=animations-for-blocks&url=%2Fwp-admin%2Fpost.php%3Fpost%3D2%26action%3Dedit

Is there a way to specify the origin of the animation to be able, for example, to make them appear from outside the page?

You could wrap the animations with a container that has overflow hidden. Not sure how well that would work for you.

Also, for example if you have a slide-up button it has this CSS for its’ initial positioning:

html:not(.no-js) [data-aos=slide-up] {
	transform: translate3d(0,100%,0);
}

You could override it to 1000% which would make it appear from further out but also make it faster I think.

The screenshots have a different site than the one you posted initially. Do both have this problem?

The VD site does not hide overflow, so you could try

.site-main#primary {
    overflow-y: hidden;
}

But yeah, it’s odd that it’s only Safari, so I don’t really know what’s causing that.

You can try AOS library GitHub, as that’s what this plugin is using: https://github.com/michalsnik/aos/issues?q=is%3Aissue+safari

Could you post a screenshot please? I don’t have access to a Safari browser

Is overflow hidden for the container that has animations?

Edit: seems like it.

I can’t seem to find what whitespace you mean.

• This reply was modified 1 year, 4 months ago by websevendev.

Added in 1.1.2, you should find an option for it here:

Note: if you’re not using a Full Site Editing theme then the blocks in post content are rendered after styles have already been added to the head, therefore the AOS stylesheet will end up at the end of the body element, which may cause the animated element to be visible before animating in.

It’s also possible to simply disable the assets using the filters here and only enable them on the pages you need.

Yes I do have plans to update to using the new WP_HTML_Tag_Processor for adding the HTML attributes, which should be faster and cleaner, how ever I haven’t gotten around to it yet. Probably within 1-3 months.

The plugin itself is quite simple and you can vet it yourself for any security risks quite quickly on github.

Interesting, it works for me in Firefox as well. Do you have any Firefox extensions that may be doing something?

The plugin is designed to work with mobile preview and it works for me with a FSE theme, normal theme and Gutenberg plugin on/off.

So I’m gonna need more info what theme, plugins and blocks you’ve got to reproduce it. Also, any errors in the JavaScript console (F12)?

I wasn’t able to add customizable default settings, but there is now a filter in place that can be used to accomplish something like that on the front end:

add_filter('anfb_aos_attributes', function($attributes, $args) {
	$attributes['data-aos-delay'] = 100;
	$attributes['data-aos-duration'] = 1000;
	$attributes['data-aos-once'] = 'true';
	return $attributes;
}, 10, 2);

It’s now also possible to copy-paste animation settings so hopefully not as painful to animate multiple blocks.

https://github.com/websevendev/attributes-for-blocks

I was wondering if there is a way to change the default settings

No, but I’ll keep that in mind next time I work on the plugin.

Looks like it’s caused by an oversight by me. Released version 1.0.6, let me know if that works for you. If it doesn’t, you could also use the “Animation container” block to wrap any blocks and add animations to that instead.