Fast vs. Slow scroll of objects

Saola Animate Support Questions
1

Problem: Can we change the speed with which objects scroll? Making it scroll faster or slower than rest of objects on a page?

For eg using a script like below? Not sure this is exactly the right one, but perhaps helps move in the right direction.

  • Block
    • Scroll down speed
    • Scroll up speed

var thing = $(’#smallBox’);

var extra = 100;

var old = $(thing).scrollTop();

$(thing).scroll(function() {

if ($(thing).scrollTop() < old) {

$(thing).scrollTop($(thing).scrollTop()-extra);

} else if ($(thing).scrollTop() > old) {

$(thing).scrollTop($(thing).scrollTop()+extra);

}

old = $(thing).scrollTop();

hex = ($(thing).scrollTop()%4096).toString(16);

$(thing).css(‘background-color’,’#’+hex);

});

Thanks

2

Hi Shawn,

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.

Regards

3

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 see the website at as.ouiwill.com

image
image1284×898 183 KB

4

Hi Shawn,

You can use the parallax scrolling technique which uses scroll event to control the animation:

  1. Set scene Overflow to Auto or Scroll in Properties > Scene tab.
  2. Insert content outside the scene so that the scene is scrollable
  3. 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.
  4. Add Run JavaScript action to scene Scroll event to control the timeline.

scroll2.saolapack (44.0 KB)

If you use wheel event instead of scroll event, you can ignore step 1 and step 2 (because this event occurs regardless of the scrollbars).

Regards

5

Solved on my own so need to post.

6

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?

Thanks!!!

Shawn

7

Hi Shawn,

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.

Regards

8

Thank you Toan!

How do you change the code to create “sync” animation for some objects and “trigger” animation for others on the same page?

Thanks alot!

9

Hi Shawn,

To trigger animation for some objects:

  1. Create an additional timeline to animate those objects.
  2. 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
  }
}

Regards