Section Divider Left to Right

Description

• section divider move left to right on scroll
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. Hover on top right of section > Click EDIT SECTION > at Design > Anchor Link, enter word: animated-divider

#1.2. Hover on Page where you use Divider > Click Gear icon

#1.3. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, you can see #3.1

<!-- 08.26c30v15 Section Divider Left to Right -->
<script>
window.SectionDividerAnimConfig = {
  sectionId: 'animated-divider',
  duration: 2500,
  delay: 0,
  easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
  offset: 80,
  replay: false
};
</script>

<script>
(function () {
  var cfg = window.SectionDividerAnimConfig;
  var sel = 'section[id*="' + cfg.sectionId + '"]';

  var css = document.createElement('style');
  css.textContent =
    sel + ' .section-divider-display .section-divider-svg-stroke{clip-path:inset(-1000px calc(100% + 1000px) -1000px -1000px);transition:clip-path ' + cfg.duration + 'ms ' + cfg.easing + ' ' + cfg.delay + 'ms;will-change:clip-path;}' +
    sel + '.sda-in .section-divider-display .section-divider-svg-stroke{clip-path:inset(-1000px -1000px -1000px -1000px);}' +
    'body.sqs-edit-mode-active ' + sel + ' .section-divider-display .section-divider-svg-stroke{clip-path:none;transition:none;}';
  (document.head || document.documentElement).appendChild(css);

  var sections = [];
  var ticking = false;
  var bound = false;

  function check() {
    ticking = false;
    var vh = window.innerHeight || document.documentElement.clientHeight;
    var pending = 0;

    sections.forEach(function (section) {
      var edge = section.getBoundingClientRect().bottom;
      var inView = edge <= vh - cfg.offset && edge > 0;

      if (inView) {
        section.classList.add('sda-in');
      } else if (cfg.replay) {
        section.classList.remove('sda-in');
      }

      if (cfg.replay || !section.classList.contains('sda-in')) pending++;
    });

    if (!pending && bound) {
      window.removeEventListener('scroll', request);
      window.removeEventListener('resize', request);
      bound = false;
    }
  }

  function request() {
    if (ticking) return;
    ticking = true;
    window.requestAnimationFrame(check);
  }

  function init() {
    if (document.body && document.body.classList.contains('sqs-edit-mode-active')) return;
    sections = [];
    document.querySelectorAll(sel).forEach(function (section) {
      if (section.querySelector('.section-divider-display .section-divider-svg-stroke')) sections.push(section);
    });
    if (!sections.length) return;

    if (!bound) {
      window.addEventListener('scroll', request, { passive: true });
      window.addEventListener('resize', request);
      bound = true;
    }
    check();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
  window.addEventListener('load', init);
  window.addEventListener('mercury:load', init);
})();
</script>

#2. Customize

nothing now

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Code Injection, you can edit current page > Add a Markdown Block.

Use this code into Markdown Block

<script>
window.SectionDividerAnimConfig = {
  sectionId: 'animated-divider',
  duration: 2500,
  delay: 0,
  easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
  offset: 80,
  replay: false
};
</script>

<script>
(function () {
  var cfg = window.SectionDividerAnimConfig;
  var sel = 'section[id*="' + cfg.sectionId + '"]';

  var css = document.createElement('style');
  css.textContent =
    sel + ' .section-divider-display .section-divider-svg-stroke{clip-path:inset(-1000px calc(100% + 1000px) -1000px -1000px);transition:clip-path ' + cfg.duration + 'ms ' + cfg.easing + ' ' + cfg.delay + 'ms;will-change:clip-path;}' +
    sel + '.sda-in .section-divider-display .section-divider-svg-stroke{clip-path:inset(-1000px -1000px -1000px -1000px);}' +
    'body.sqs-edit-mode-active ' + sel + ' .section-divider-display .section-divider-svg-stroke{clip-path:none;transition:none;}';
  (document.head || document.documentElement).appendChild(css);

  var sections = [];
  var ticking = false;
  var bound = false;

  function check() {
    ticking = false;
    var vh = window.innerHeight || document.documentElement.clientHeight;
    var pending = 0;

    sections.forEach(function (section) {
      var edge = section.getBoundingClientRect().bottom;
      var inView = edge <= vh - cfg.offset && edge > 0;

      if (inView) {
        section.classList.add('sda-in');
      } else if (cfg.replay) {
        section.classList.remove('sda-in');
      }

      if (cfg.replay || !section.classList.contains('sda-in')) pending++;
    });

    if (!pending && bound) {
      window.removeEventListener('scroll', request);
      window.removeEventListener('resize', request);
      bound = false;
    }
  }

  function request() {
    if (ticking) return;
    ticking = true;
    window.requestAnimationFrame(check);
  }

  function init() {
    if (document.body && document.body.classList.contains('sqs-edit-mode-active')) return;
    sections = [];
    document.querySelectorAll(sel).forEach(function (section) {
      if (section.querySelector('.section-divider-display .section-divider-svg-stroke')) sections.push(section);
    });
    if (!sections.length) return;

    if (!bound) {
      window.addEventListener('scroll', request, { passive: true });
      window.addEventListener('resize', request);
      bound = true;
    }
    check();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
  window.addEventListener('load', init);
  window.addEventListener('mercury:load', init);
})();
</script>