michaelrafailyk / stickymate Goto Github PK

Starting work on alternate way of watching elements with using Intersection Observer to avoid constant listening to the scroll event.

Hey,

this library looks stunning and the demonstration looks awesome. What a bummer it only has 2 stars.

I think you should really publish this as a package on NPM and make it usable with bundlers and imports etc. This would benefit for the ecosystem and your libraries popularity.

In order to trigger videos for example. (autoplay when they have zoomed to fullwidth for example)

Your library is great, but it lacks of some key features.

• It should be bundled using rollup.js
• should be writting in TypeScript (nice to have, not must have)
• should not be included but rather be exported, so we can "import" or "require" it. While it is already importable, its a self running library, which runs as soon as its included.

Stickymate should export itself als "stickymate" and have an init method, maybe with configurable parameters.

So, in a modern setup, people could decide (thanks to rollup) if they like to include it as module, umd, amd etc.

import stickymate from "stickymate.js"

stickymate.init({ options: [optional] });

Rollup takes care of transpiling and its super easy to setup. TypeScript might be overkill for this small module with only one export.

Porting this to a solid rollup config is done very quickly.

On animation logic right now the bottom of the viewport is a -100vh but on CSS logic it is a 100vh. I have a solution how to support existed syntax and new reversed syntax at the same time. But need to decide – should the keys direction be reversed by default to CSS logic or not?

Existed syntax (scrolling down, element moving up):

<div data-animation="opacity: {-20vh: 1, 0vh: .5, 10vh: 1}"></div>

New reversed syntax (scrolling down, element moving up):

<div data-animation="opacity: {20vh: 1, 0vh: .5, -10vh: 1}"></div>

It would be cool if a started animation (lets say scale from 0.75 to 1) could be snapped once triggered. Currently, it will stop where scroll/momentum ends and sometimes lead to weird positioning. Do you think something like this can be possible, maybe even with css snapping?

Animation is glitching when there is -100vh:{...}, 0: {}, 100vh: {}
but element is already visible on the page on load.

Hi

Is it possible to add callback function while steps of animation? This would be nice. We can make ajax call for example...is there any way to add this option quickly?

thanks...

I am considering adding options:

1. Associating positional keys with parent of element instead of element (optional). It will allow synchronizing animations of different elements located in the same parent. Implementation can be different and it's hard to decide what's better and more convenient. I put here 3 possible versions.

<div data-animation="opacity: {-50vh: 1, 0: 0}" data-options="animation-keys: parent"></div>

<div data-animation="opacity: {-50vh: 1, 0: 0}, options: {keys: parent}"></div>

<div data-animation="opacity: {-50vh(parent): 1, 0(parent): 0}"></div>

2. Setting min-width of viewport at which data-sticky, data-animation and data-classes will work. Like a @media (min-width) {...} in CSS.

<div data-options="viewport-min-width: 1024px"></div>

3. Make a classes of animations and describe it aside in JavaScript.

<div data-animation="anim1 anim2"></div>

Questions that i faced:

1. Should i make one more data-options attribute or trying to add new features to existing attributes?
2. Should data-options be applied to all data-sticky, data-animation and data-classes attributes? Like a keys: parent instead of animation-keys: parent.