https://www.pictanovo.com/wp-content/themes/pictanovo/assets/js/patterns/section-image.js?ver=1.0.2

1/**
2 * Animate image sections on enter view.
3 */
4(function() {
5  if (!window.gsap || !window.ScrollTrigger) return;
6  window.gsap.registerPlugin(window.ScrollTrigger);
7
8  const sections = document.querySelectorAll('.section-image-right, .section-image-left');
9  if (!sections.length) return;
10
11  sections.forEach((section) => {
12    const inner = section.querySelector('.section-image-right__inner');
13    const content = section.querySelector('.section-image-right__content');
14    if (!inner || !content) return;
15
16    const fromX = section.classList.contains('section-image-left') ? -80 : 80;
17
18    window.gsap.set(inner, { autoAlpha: 0 });
19    window.gsap.set(content, { x: fromX });
20
21    const trigger = {
22      trigger: section,
23      start: 'top 85%',
24      once: true
25    };
26
27    window.gsap.to(inner, {
28      autoAlpha: 1,
29      duration: 0.9,
30      ease: 'power2.out',
31      scrollTrigger: trigger
32    });
33
34    window.gsap.to(content, {
35      x: 0,
36      duration: 0.9,
37      ease: 'power2.out',
38      clearProps: 'transform',
39      scrollTrigger: trigger
40    });
41  });
42})();