Ivan Sedov

wp_enqueue_script('main', 'path', [], null, true);
wp_localize_script('main', 'php_data', ['homeUrl' => home_url()]);

• Про готовые CSS-анимации - animate.css, Wow.js, и.т.д. Там много динозавров из времен jQuery. Такие штуки часто бывают не в тему дизайна, но стоит посмотреть и забыть. Хотя для сайтов в духе дизайнерской дичи, вроде той, что успешно делают в студии Артемия Лебедева - может быть и ок.
  
• Про интерполяцию всего и вся. Тут обычно выбирают между GSAP и Anime.js. Первый вариант - более замороченный, есть полезные плагины, второй - попроще, но тоже хорош, в некоторых кругах даже более популярен. Для совсем простых задач - можно свой инструмент написать.
  
• Про скролл, в основном в контексте CSS-анимаций. Тут Locomotive Scroll рулит.
  
• Про переходы между экранами. Грубо говоря прокаченный роутер. Самый популярный - Barba.js. Раньше еще был Highway.js, но в последне время что-то про него мало говорят.
  
• Про экспорт готовых анимаций из софта для анимаций. Тут нужно отталкиваться от софта. Обычно вопрос возникает в контексте AE и простых мультиков - тут Lottie, говорят, неплох. Но нужно дизайнера заранее консультировать по теме, чтобы лишнего не намалевал.
  
• Про визуализацию данных. Тут полезно знать про d3.js, в основном ради готовых примеров.
  
• Про трехмерный WebGL, чтобы не писать все руками. Самый популярный вариант - Three.js, в основном за счет экосистемы и горы готовых решений, но есть и альтернативы на любой кус и цвет. Для 2D -эффектов вообще ничего не нужно в большинстве случаев.
  
• Плюс не стоит забывать про всякие вспомогательные штуки вроде WebFontLoader, Hammer.js, LeaderLine, и.т.д. К анимациям они не относятся, но в работе могут быть полезны, чтобы не писать все самому.
  

const processNonEmptyObjectOnly = (f, defaultResult) =>
  data => (
    data = data instanceof Object ? Object.entries(data) : [],
    data.length ? f(data) : defaultResult
  );

const createTreeHTML = processNonEmptyObjectOnly(data => `
  <ul>${data.map(n => `
    <li>
      ${n[0]}
      ${createTreeHTML(n[1])}
    </li>`).join('')}
  </ul>`
, '');


document.body.insertAdjacentHTML('beforeend', createTreeHTML(data));

const createTreeElement = processNonEmptyObjectOnly(data =>
  data.reduce((ul, n) => (
    ul.append(document.createElement('li')),
    ul.lastChild.append(n[0], createTreeElement(n[1])),
    ul
  ), document.createElement('ul'))
, '');


document.body.append(createTreeElement(data));

document.addEventListener('click', function (event) {

	// Игнорируем клики, которые не относятся к нашей кнопке
	if (!event.target.hasAttribute('data-fullscreen')) return;

	// Если уже в полном, выйти
	// Иначе, снова открыть полный экран
	if (document.fullscreenElement) {
		document.exitFullscreen();
	} else {
		document.documentElement.requestFullscreen();
	}

}, false);

SELECT meta_key, meta_value, length(meta_value) 
FROM wp_postmeta 
ORDER BY length(meta_value) DESC
LIMIT 10;

<div class="single-share">
	<a href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" target="_blank">
		<?php __('Поделиться в Facebook') ?>
	</a>
	<a href="https://twitter.com/home?status=<?php the_permalink(); ?>" target="_blank">
		<?php __('Поделиться в Twitter') ?>
	</a>
	<a href="https://telegram.me/share/url?url=<?php the_permalink(); ?>&text=<?php the_title() ?>" target="_blank">
		<?php __('Поделиться в Telegram') ?>
	</a>
</div>