import { animate, onScroll, utils } from 'animejs';

const [ $value ] = utils.$('.value');

let resizes = 0;

animate('.square', {
  x: '15rem',
  rotate: '1turn',
  ease: 'linear',
  autoplay: onScroll({
    container: '.scroll-container',
    enter: 'bottom top',
    leave: 'center bottom',
    sync: .5,
    onResize: () => $value.textContent = ++resizes,
  })
});

<div class="iframe-content resizable">
  <div class="scroll-container scroll-y">
    <div class="scroll-content grid square-grid">
      <div class="scroll-section sticky">
        <div class="large row">
          <pre class="large log row">
            <span class="label">resize</span>
            <span class="value">0</span>
          </pre>
        </div>
      </div>
      <div class="scroll-section padded">
        <div class="large row">
          <div class="square"></div>
        </div>
      </div>
      <div class="scroll-section"></div>
    </div>
  </div>
</div>