ActivePresenter Saola Animate Pricing Download

Pinning objects questions

This is a sample you shared of pinning and unpinning objects.

• For Scroll-n-pin how do you set pin and unpin in % vs. pixels to ensure page is responsive (and better relates to all the objects which are set in %)?
• At times when you scroll fast, the blue box jerks above the green line (and looks buggy vs. solidly staying under the green line) until the red line comes and takes it up. Is there a way to prevent that?

Thank you!

scroll-n-pin.saolapack (3.4 KB)

Hi Shawn,

To control animations and and/or pin elements when scrolling, you need to understand the following properties:

  • this.dom.clientHeight: scene client height (in pixels), the height of the client area in which elements are shown. If the scene height is 100%, and no horizontal scrollbar, it’s also the viewport height.
  • this.dom.scrollHeight: scene scroll height (in pixels), the height of the scene content, including content not visible on the screen due to overflow.
  • this.dom.scrollTop: scene scroll top (in pixels), the number of pixels that the scene content is scrolled.
  • doc.getElement(‘element name’).dom.offsetTop: offset top position of an element (in pixels), distance from top edge of the element to top edge of its parent (scene if it’s not in a group)


So you can set pin/unpin position in % and convert to pixels based on above properties, or use an element (with position in %) as pin/unpin position and get its offsetTop to convert to pixels.

About the jerky issue, I see that it only occurs on IE and Edge. It seems that these browsers repaint before firing scroll event. It’s the issue of these browsers, we can’t fix it yet.