Pinning objects questions

Saola Animate Support Questions
1

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)

2

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)

scroll%20properties

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.

Regards

3

I am trying to pin HTML_Widget_1 (which I have renamed Div1 since your code is based on Div1) at 150% of page scroll and unpin on click of Unpin button.

Unfortunately, a simple name change in the timeline did not work …?

Separately, in a different project, in the updateElementPostionOnScrollOrResize code, I tried to replace Div_1 with Group_1 and div1 with group1 – however that did not work either. Interestingly, it still pins / unpins Div_1 even though the code was changed. Thought I would let you know.

I don’t know how to Unpin based on button click so I have not tried that.

Can you please help?

Thanks!!!

scroll-n-pin-htmlwidget.saolapack (3.6 KB)

In case helpful and you can respond, here is pack with name swap in the code:

Scroll-n-pin - Name swap.saolapack (108.3 KB)

4

Hi Shawn,

Timeline_1 is used to keep element position unchanged.
After updating the script, you must also update animation for new pinned element in Timeline_1.

Regards

5

Ok. I tried that approach.

However, it is still not “pinned” and jerks around alot (see screengrab).

There are 2 scenarios where this function is required:

  1. To pin on scroll and unpin with a button (as discussed above)
  2. For the top navigation menu (Home, Page 1, Page 2 etc.) so it remains at the top of the screen even after scroll.

Can you suggest alternate ways (a pack would be greatly appreciated) to pin and unpin for the 2 cases above as the prior method is not quite working?

Thanks alot!

https://bit.ly/2MlnOzc

6

This method updates element position based on scroll position so it may be jerky on some browsers such as Edge.
You can try another method is setting sticky or fixed position for your element: https://developer.mozilla.org/en-US/docs/Web/CSS/position
To unpin, just set the element position to absolute.

Regards

7

Tried the fixed position provided in the Mozilla page by giving my red box the class "box’. Why is my box not adopting the CSS?

Fixed position.saolapack (2.1 KB)

8

Hi Shawn,

First, your CSS is not correct. Saola Animate doesn’t use the element name as its DOM id.
Moreover, element position is set as absolute by the player, you must use !important to overwrite it.
The correct CSS should be:

.box {
  position: fixed !important;
}

For more information about using CSS with Saola Animate, you can see this tutorial: https://atomisystems.com/html5-animation/using-css-to-create-text-effects/

Second, Saola Animate scene uses CSS 3D transform so the fixed element is relative to the scene, not the window. To make it relative to the window, you must clear the scene perspective when it’s activated:

function onSceneActivated(doc, e) {
  this.dom.style.perspective = '';
}

Please check the fixed package here: fixed position.saolapack (2.2 KB)

Regards

9

Thanks – most helpful!

Would be v. grateful if you could show how to manage the sticky position (using this approach vs. the prior one). Importantly, the settings should be in % not in pixels from the top. I imagine it is related to the diagram you have pasted above …?

scroll%20properties

In Scene 1, goal is to PIN when top of the red box reaches top of the page. Then UNPIN when I click the blue box.

In Scene 2, goal is to PIN when top of the red box reaches top of the page. Then UNPIN when the top of the round circle reaches the bottom of the red box.

sticky position.saolapack (2.6 KB)

Thanks!!

10

Have been trying to fix on my own. However, expertise of CSS and JS not so strong (which is why Saola is such an amazing product for people like us – and why this forum is super helpful!). Any help would be appreciated.

Thank you,

Shawn

11

Hi Toan,

Any suggestions on how to tackle this?

Thanks

Shawn