slide-element
okikio-native
slide-element | okikio-native | |
---|---|---|
13 | 4 | |
177 | 93 | |
- | - | |
0.0 | 4.0 | |
11 months ago | 7 months ago | |
TypeScript | TypeScript | |
ISC License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
slide-element
- I made a < 750 byte JavaScript library for sliding elements open & closed, inspired by jQuery's slide utilities.
- Here's a < 750 byte JavaScript library for sliding elements open & closed, inspired by jQuery's slide utilities.
- Here's my ~700 byte library for sliding elements open + closed (now supports animating padding too).
-
When a JavaScript WeakMap() Actually Came in Handy
Back when I was working on slide-element, I noticed an issue that would occur when I rapidly toggled an element open & closed. If the previous animation wasn't allowed to finish, the new one would eventually get outta whack, clipping the content on subsequent animations.
- I built a ~700 byte library for sliding elements w/ dynamic heights open & closed.
- I made a <500 byte library for animating elements w/ dynamic heights open & closed.
- I made a ~465 byte library for animating elements w/ dynamic heights open & closed.
- Show HN: I made a 450 byte lib for sliding auto height elements open/closed
- I made a 600 byte library for sliding elements w/ variable heights open & closed.
- slide-element: a tiny, jQuery-reminiscent library for hiding and showing elements in a sliding fashion
okikio-native
-
Github Codespaces vs. Gitpod, an in-depth look
This example is based on one of my Github projects okikio/native, it's a good starting point for setting up a workspace for your own project.
-
anime.js alternatives - okikio-native and spring-easing
3 projects | 4 Aug 2021
@okikio/animate is a part of a mono repo called okikio/native. @okikio/animate is a powerful animation library based on the Web Animation API (WAAPI), it was inspired by animate plus, and animejs, and thus uses similar syntax, so, if you are used to those you will be able to start using @okikio/animate with little to no learning curve. I suggest reading the CSS-Tricks article about the library (https://css-tricks.com/how-i-used-the-waapi-to-build-an-animation-library/) as well checking out the more examples on demo in the @okikio/animate - examples & demos Codepen Collection (https://codepen.io/collection/rxOEBO).
-
@okikio/animate - animejs but built on the Web Animation API.
Read more about it on npm or Github.
-
Wtf Wednesday February 24 2021
Anyone wanna take a look at @okikio/native. It's An initiative which aims to make it easy to create complex, light-weight, and performant web applications using modern js api's.
What are some alternatives?
react-native-animatable - Standard set of easy to use animations and declarative transitions for React Native
zeit - A Fitbit clock face for learners of the German language 🕐
my-js-math-and-ui-utils - A bunch of typescript math and ui utils that I use a lot
tarkov-wiki-prices - Browser addons to display the prices of items on the Escape From Tarkov wiki.
spring-easing - Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).
trigger - A library for creating scroll-based animation with HTML attributes and CSS variables.
scrollreveal - Animate elements as they scroll into view.
art-showcase-2020 - A showcase of all of my favourite art pieces from 2020
openvscode-server - Run upstream VS Code on a remote machine with access through a modern web browser from any device, anywhere.
react-text-transition - Animate your text changes
react-recurrence - A simple, customizable, and reusable component for providing the recurrence functionality.
typescript-coverage-report - Node command tool to generate TypeScript coverage report