Skip to content

New attribute for synchronization of animations of different elements

Latest
Latest
Compare
Choose a tag to compare
@michaelrafailyk michaelrafailyk released this 31 Oct 15:43
· 9 commits to master since this release
v1.4.0
920a49a
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Stopping package updates on npm

It's a long story but if you want to have the latest version, please download it from this repository on GitHub.

Regarding npm, I already went through this hell once when registering stickymate package 4 years ago on my old Mac. Now I made some update by request and decided to update the package on npm. But I moved to new Mac and realized that now I have to go through that hell again like:

  • Installing Python. I may understand why, okay, and I already have it for another tasks.
  • Installing brew. Oookaay, it looks like a tool for tool.
  • Installing nvm. One more tool for tool, but we have fun anyway, so.
  • Installing node.js. A whole server to just upload 3 files, really? But I don't need server.
  • And finally, install npm.
  • Find a useful manual. Surprise, but it is not an official manual that misses a lot of steps and simply not written for people that may do it for the first time.
  • Find/remember all the necessary commands.
  • Build the necessary package structure in a right location.
  • Find an answers why you get some errors. And realize there are different solutions that works for different people.
  • Update the package without getting errors. Nice, but it takes me a whole day and now I want to die. But wait, it's not all, because I don't need it anymore and now I need to:
  • Remove node.js in dozens of locations. And perhaps in some tricky receipts?
  • Remove npm and nvm.
  • Remove brew.

All this way for just upload one file. One file, I think you got it.

And... I sent it to hell, deciding to temporarily remove all references to the npm package and keep it updated only here on GitHub. npm definitely should reconsider the usability of their platform, just like GitHub did it with the web interface. That is, every time I see that I need another 3 applications to be installed to run a simple task that should not require any applications at all, It just feels wrong. And if you think that I am overcomplicating, please read this article.

New attribute data-sync-with

I added the new attribute for synchronizing the starting point of animations of different elements. To make it work you need to do two things:

  1. Specify the leader element which should be responsible for the synchronization. It should have some unique id that will be used as reference in follower(s) element(s).
    <div data-animation="..." id="leader"></div>

  2. Add data-sync-with="id: ..." attribute to any follower element that should follow the leader element. Specify the leader's id here instead of ....
    <div data-animation="..." data-sync-with="id: leader"></div>

Here's an example where two different followers (div and line) synchronize their virtual top position to the leader element, just like they are vertically located exactly where the leader is located, so their animations will fire simultaneously. That is, when the leader's top touches the top of the viewport, it will be 0vh for him and for all of the followers too.

<div data-animation="..." id="leader">Hey, sync with me!</div>

<div data-animation="..." data-sync-with="id: leader"></div>

<svg>
    <line data-animation="..." data-sync-with="id: leader"></line>
</svg>

Here's how it works in action

Screen.Recording.2024-10-31.at.11.33.59.mov
Assets 2
Loading