animate-in-view / animate-in-view.php

animate-in-view.php in Animate In View 1.0.4, at animate-in-view.php

58 lines 2.0 KB

Raw Download Zip

1	<?php
2	/**
3	* Plugin Name: Animate In View
4	* Description: This block will animate in as soon as it enters the viewport of the browser window. That's it.
5	* Requires at least: 5.9
6	* Requires PHP: 7.0
7	* Version: 1.0.4
8	* Author: Kevin Batdorf
9	* License: GPL-2.0-or-later
10	* License URI: https://www.gnu.org/licenses/gpl-2.0.html
11	* Text Domain: animate-in-view
12	*
13	* @package kevinbatdorf
14	*/
15
16	add_action('init', function () {
17	register_block_type(__DIR__ . '/build');
18	wp_set_script_translations('kevinbatdorf-animate-in-view', 'animate-in-view');
19	});
20
21	// The JavaScript is minimal so it's easier to just maintain it here.
22	add_action('wp_enqueue_scripts', function () {
23	wp_register_script('animate-in-view-js', false, [], '', true);
24	wp_enqueue_script('animate-in-view-js');
25	wp_add_inline_script(
26	'animate-in-view-js',
27	<<<JS
28	(function() {
29	'use strict';
30	document.querySelectorAll('[animatein]').forEach(function (el) {
31	if (!Number(el.getAttribute('enabled'))) return;
32	const dir = el.getAttribute('direction');
33	const offset = el.getAttribute('offset');
34	el.style.opacity = 0;
35	el.style.overflow = 'hidden';
36	Array.from(el.children).forEach(function (child) {
37	child.style.transform = `translateX(calc(\${offset} * \${dir}))`;
38	});
39	const observer = new IntersectionObserver(function (entries) {
40	if (entries[0].intersectionRatio === 0) {
41	el.classList.remove(el.getAttribute('animatein'));
42	el.style.overflow = 'hidden';
43	return;
44	}
45	if (entries[0].intersectionRatio < Number(el.getAttribute('threshold'))) {
46	return;
47	}
48	el.style.overflow = 'visible';
49	el.classList.add(el.getAttribute('animatein'));
50	Number(el.getAttribute('once')) && observer.unobserve(el);
51	}, { threshold: [Number(el.getAttribute('threshold')), 0] });
52	observer.observe(el);
53	});
54	})();
55	JS
56	);
57	});
58