https://restored316designs.com/wp-content/plugins/restored316-site…/js/section-animations.js?ver=1789758819

1(function () {
2  function clamp(value, min, max) { return Math.min(max, Math.max(min, value)); }
3
4  function naturalDocumentTop(element) {
5    var top = 0;
6    var node = element;
7    while (node) {
8      top += node.offsetTop || 0;
9      node = node.offsetParent;
10    }
11    return top;
12  }
13
14  function linkedFrame(section, progress) {
15    var effect = section.dataset.r316ssSectionAnimation || 'fade-in';
16    var start = { opacity: 1, x: 0, y: 0, scale: 1, clip: 0 };
17    if (effect === 'fade-in') start.opacity = 0;
18    if (effect === 'fade-in-up') { start.opacity = 0; start.y = 28; }
19    if (effect === 'fade-in-down') { start.opacity = 0; start.y = -28; }
20    if (effect === 'fade-in-left') { start.opacity = 0; start.x = -28; }
21    if (effect === 'fade-in-right') { start.opacity = 0; start.x = 28; }
22    if (effect === 'slide-in-left') start.x = -48;
23    if (effect === 'slide-in-right') start.x = 48;
24    if (effect === 'slide-in-up') start.y = 48;
25    if (effect === 'slide-in-down') start.y = -48;
26    if (effect === 'zoom-in') { start.opacity = 0; start.scale = 0.92; }
27    if (effect === 'zoom-out') { start.opacity = 0; start.scale = 1.08; }
28    if (effect === 'reveal-up') { start.opacity = 0; start.y = 20; start.clip = 100; }
29
30    var startX = Number(section.dataset.r316ssScrollStartX || 0);
31    var startY = Number(section.dataset.r316ssScrollStartY || 0);
32    var endX = Number(section.dataset.r316ssScrollEndX || 0);
33    var endY = Number(section.dataset.r316ssScrollEndY || 0);
34    start.scale = Number(section.dataset.r316ssScrollStartScale || (start.scale * 100)) / 100;
35    var restScale = Number(section.dataset.r316ssScrollRestScale || 100) / 100;
36    var exitEnabled = section.dataset.r316ssScrollExit === '1';
37    var phase = exitEnabled ? Math.min(1, progress * 2) : progress;
38    var x = start.x + startX + (endX - startX - start.x) * phase;
39    var y = start.y + startY + (endY - startY - start.y) * phase;
40    var opacity = start.opacity + (1 - start.opacity) * phase;
41    var scale = start.scale + (restScale - start.scale) * phase;
42    var clip = start.clip * (1 - phase);
43
44    if (exitEnabled && progress > 0.5) {
45      var exitPhase = (progress - 0.5) * 2;
46      var exitX = Number(section.dataset.r316ssScrollExitX || 0);
47      var exitY = Number(section.dataset.r316ssScrollExitY || 0);
48      var exitScale = Number(section.dataset.r316ssScrollExitScale || 100) / 100;
49      var exitOpacity = Number(section.dataset.r316ssScrollExitOpacity || 0) / 100;
50      x = endX + (exitX - endX) * exitPhase;
51      y = endY + (exitY - endY) * exitPhase;
52      opacity = 1 + (exitOpacity - 1) * exitPhase;
53      scale = restScale + (exitScale - restScale) * exitPhase;
54      clip = 0;
55    }
56
57    section.style.opacity = String(opacity);
58    section.style.transform = 'translate3d(' + x + 'px,' + y + 'px,0) scale(' + scale + ')';
59    section.style.clipPath = 'inset(' + clip + '% 0 0)';
60  }
61
62  function mount() {
63    var sections = Array.from(document.querySelectorAll('[data-r316ss-section-animation]'));
64    if (!sections.length) return;
65
66    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
67      sections.forEach(function (section) { section.classList.add('r316ss-section-animation-visible'); });
68      return;
69    }
70
71    var loadSections = sections.filter(function (section) { return section.dataset.r316ssAnimationTrigger === 'load'; });
72    window.requestAnimationFrame(function () {
73      window.requestAnimationFrame(function () {
74        loadSections.forEach(function (section) { section.classList.add('r316ss-section-animation-visible'); });
75      });
76    });
77
78    var observed = sections.filter(function (section) { return !section.dataset.r316ssAnimationTrigger || section.dataset.r316ssAnimationTrigger === 'scroll-into-view'; });
79    if (!('IntersectionObserver' in window)) {
80      observed.forEach(function (section) { section.classList.add('r316ss-section-animation-visible'); });
81    } else if (observed.length) {
82      var observer = new IntersectionObserver(function (entries) {
83        entries.forEach(function (entry) {
84          var once = entry.target.dataset.r316ssAnimationOnce !== '0';
85          if (entry.isIntersecting) {
86            entry.target.classList.add('r316ss-section-animation-visible');
87            if (once) observer.unobserve(entry.target);
88          } else if (!once) {
89            entry.target.classList.remove('r316ss-section-animation-visible');
90          }
91        });
92      }, { threshold: 0.01, rootMargin: '0px 0px -3% 0px' });
93      observed.forEach(function (section) { observer.observe(section); });
94    }
95
96    var linked = sections.filter(function (section) { return section.dataset.r316ssAnimationTrigger === 'scroll-linked'; });
97    if (linked.length) {
98      var scheduled = false;

99      var update = function () {
100        linked.forEach(function (section) {
101          var disabled = (window.innerWidth <= 767 && section.classList.contains('r316ss-animation-disable-mobile')) || (window.innerWidth >= 768 && window.innerWidth <= 1024 && section.classList.contains('r316ss-animation-disable-tablet'));
102          if (disabled) {
103            section.style.opacity = '1';
104            section.style.transform = 'none';
105            section.style.clipPath = 'inset(0)';
106            return;
107          }
108          var startLine = window.innerHeight * 0.95;
109          var endLine = section.dataset.r316ssScrollExit === '1' ? window.innerHeight * 0.05 : window.innerHeight * 0.25;
110          var naturalTop = naturalDocumentTop(section) - window.scrollY;
111          var progress = clamp((startLine - naturalTop) / (startLine - endLine), 0, 1);
112          var delay = clamp(Number(section.dataset.r316ssScrollDelay || 0) / 100, 0, 0.8);
113          progress = clamp((progress - delay) / (1 - delay), 0, 1);
114          linkedFrame(section, progress);
115        });
116        scheduled = false;
117      };
118      var requestUpdate = function () {
119        if (!scheduled) { scheduled = true; window.requestAnimationFrame(update); }
120      };
121      window.addEventListener('scroll', requestUpdate, { passive: true });
122      window.addEventListener('resize', requestUpdate);
123      requestUpdate();
124    }
125  }
126
127  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mount);
128  else mount();
129})();