Please provide a sample page or video so that I can understand what you mean.
Your script just scrolls the object a constant amount (100px) each time the scroll event occurs, and set its background color based on the scroll position.
Sorry, my script is not accurate then. In the image below the woman in the image above and the pink block overlay are moving at different speeds, it seems. that is the effect i am looking for.
You can use the parallax scrolling technique which uses scroll event to control the animation:
Set scene Overflow to Auto or Scroll in Properties > Scene tab.
Insert content outside the scene so that the scene is scrollable
Create animation as normal. In this sample, I just animate the clipping top property of the mask.
You animation should be created in another timeline instead of the main timeline, otherwise Autoplay option in Document pane must be cleared so that the animation doesn’t play automatically.
Add Run JavaScript action to scene Scroll event to control the timeline.
Upon closer inspection, I believe the answer you provided, solves another problem but I still have a question with this one.
It seems you are suggesting that we trigger an animation based on when the screen reaches a certain point to achieve the fast and slow scroll effect. Is that correct? If so, that would not work, as once the animation is triggered it will “play” till the end of the timeline head, correct?.
What we want is not to trigger an animation, but to have the object move fast or slowly totally synchronized with the finger / scroll movement. If the finger moves a little, it should move a little. We don’t want to trigger an animation that goes all the way.
Is there a way to achieve this synchronous movement of the object with scrolling?
You didn’t see the attached sample, right?
In that sample, the animation is synced with with the scroll position.
Of course, with JavaScript, you can do both: sync or trigger.
Create an additional timeline to animate those objects.
In Scroll event handler, check the trigger condition and start that timeline. For example:
if (!this.timeline1Started) { // just trigger once
if (this.dom.scrollTop >= 200) { // when the scene is scrolled 200px or more
doc.getTimeline('Timeline_1').start(); // start timeline 1 animation
this.timeline1Started = true; // mark timeline 1 started
}
}