Path animation on scroll

Can we make this path animation on scroll similar to this


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) { = '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 = '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 / (htmlElem.scrollHeight - htmlElem.clientHeight) * timeline.getDuration());
      }, false);

Sample project: horizontal scroll.saolapack (92.3 KB)


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.




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.


1 Like


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!


1 Like


I recently started to use saola so these old topic are really handy. But i have a question about this topic. I tried using this and it works fine. Im trying to use this one in a iframe but it doesnt work. Im only a designer and not good at js. Could anyone help me how i make it work on parent’s height?


Hi Murat,

For some reason, the above samples might not work well in Saola Animate 3.
So, if you face any issues, kindly send us your project (File > Save As > Package) with a more detailed description. That helps us support you better.
You can attach it here or send it to our email address

I want to add additional information that from version 3, Saola Animate supports users to create line drawing animation with few clicks. So, users don’t need to have coding skills.
See detail at: Add Shape Elements in Saola Animate 3 - Atomi Systems, Inc.

Have a nice day,

This example is amazing, but how do I make it work with the autofit option?

This is the result I get if I use that option in document setting
…thanks saola team

Hi @lesliechow_lesliecho,

Please check this updated sample:
horizontal scroll 2.saolapack (92.2 KB)


Wow! Thank you so much! You are amazing! :muscle::muscle::muscle::muscle::muscle: