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.
- Add an additional timeline, then add your own animations to that timeline.
- Set scene
Overflow: Hidden
in Properties pane because we must handle scroll in document level. - Add script to Scene Activate event to set its position to fixed:
function onSceneActivated(doc, e) {
this.dom.style.position = 'fixed';
}
- 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. 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.
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
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