Path animation on scroll

Saola Animate Support Questions
2

Hi,

Basically, you will need to write a piece of script to control the animation as I mentioned in this thread: Fast vs. Slow scroll of objects
However, to make the content scroll horizontally as in your sample, you must set fixed position for your scene and handle scroll event on window object.

  1. Add an additional timeline, then add your own animations to that timeline.
  2. Set scene Overflow: Hidden in Properties pane because we must handle scroll in document level.
  3. Add script to Scene Activate event to set its position to fixed:
    function onSceneActivated(doc, e) {
      this.dom.style.position = 'fixed';
    }
  1. Add script to Document Ready event to make the content overflow vertically, and to control timeline in step 1 when scrolling:
    function onDocReady(doc, e) {
      // make content overflow vertically
      doc.dom.style.paddingBottom = '3000px'; // you can change this number
      // control timeline when scrolling
      window.addEventListener('scroll', function() {
        var htmlElem = document.documentElement;
         // replace Timeline_2 by the name of the timeline in step 1
        var timeline = doc.getTimeline('Timeline_2');
        // map scroll position to timeline timestamp
        // scroll 0 => timeline 0, scroll max (scrollHeight - clientHeight) => timeline duration
        // Note: htmlElem.scrollTop doesn't work on iOS
        // window.scrollY doesn't work on IE
        // => use window.pageYOffset
        timeline.seek(window.pageYOffset / (htmlElem.scrollHeight - htmlElem.clientHeight) * timeline.getDuration());
      }, false);
    }

Sample project: horizontal scroll.saolapack (92.3 KB)

Regards