Path animation on scroll

Saola Animate Support Questions
#1

Can we make this path animation on scroll similar to this https://www.castlighthealth.com/user-journey-sarah/

#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

#3

Hi Toan

This is awesome. :slight_smile: Thanks for the code. Also let me how do i make shape path animation as given in the example link. I don’t think saola currently supports shape morphing (tweening) feature. Screenshot for same is enclosed.

Capture

Regards
Niraj

#4

Hi,

I’ve just updated the sample project above with path drawing animation, please check it again.
In that sample, onTimelineUpdated function is added to Timeline_2 Update event, this function in turn calls drawPath function to draw the freeform path.

Here is another sample that draws a shape automatically (without using scroll event):
line drawing.saolapack (2.0 KB)

FYI, we’ve planned to support shape drawing and morphing animations in version 3.

Regards

1 Like
#5

Hi,

I found Saola Animate by chance and I think it is a great piece of software. If I only knew javascript a little bit better…
Shape drawing and morphing animation are certainly great features ! I can’t wait what other fantastic features you will reveal in version 3. My Best Wishes!

Tony

1 Like