Path animation on scroll

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

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

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

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

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

Hi,

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?

Murat

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 support@atomisystems.com.

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,
Thuy

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)

Regards

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