Description
Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?
Designing and developing UIs for the mobile web is tricky, but it's extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.
@daneden did really nice work with Animate.css but I think the web would benefit if we could take that work to the next level. There's already been fantastic experiments and demos exploring CSS-based transitions, but it's distributed all over.
Originally started at h5bp/lazyweb-requests#122
Effeckt.css alternatives and similar libraries
Based on the "Animations" category.
Alternatively, view Effeckt.css alternatives based on common mentions on social networks and blogs.
-
-
-
-
-
AutoAnimate
A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application. -
tsParticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components. -
-
-
-
Scrawl-canvas Library
Responsive, interactive and more accessible HTML5 canvas elements. Scrawl-canvas is a JavaScript library designed to make using the HTML5 canvas element easier, and more fun -
-
Scroll Btween
ScrollBtween uses scroll position of document - or any DOM element - to tween CSS values on any DOM element. -
TransitionEnd
:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event. -
-
Scroll Frames
Animate sequences of still frames on any DOM element in relation with its position into the viewport. https://olivier3lanc.github.io/Scroll-Frames/
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Effeckt.css or a related project?
README
This repo is archived
Effeckt.css
A Performant Transitions and Animations Library : http://h5bp.github.io/Effeckt.css
Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?
Designing and developing UIs for the mobile web is tricky, but it's extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.
@daneden did really nice work with Animate.css but I think the web would benefit if we could take that work to the next level. There's already been fantastic experiments and demos exploring CSS-based transitions, but it's distributed all over.
Originally started at h5bp/lazyweb-requests#122
Effeckt Trailer
Examples To Add
- tympanus.net/Development/ModalWindowEffects/
- tympanus.net/Development/PageTransitions/
- tympanus.net/Development/PFold/index2.html
- leaverou.github.io/animatable/
- lab.hakim.se/ladda/
- lab.hakim.se/kontext/
- lab.hakim.se/avgrund/
- lab.hakim.se/meny/
Because there are so many, I expect we could group things by role:
- button/touch effects
- state transition
- modal/notification transition
- attention attractors
Goals
- Provide a minimal UI. Only use style hooks for transitions and animations.
- Designer-curated set of classy and reasonable effects. (no
easeInBounce) - Establish browser support guidelines (e.g. Android 2.3 would gracefully degrade)
- CSS performance regression testing (a la bench.topcoat.io)
- Deliver jank-free 60fps performance on target browsers/devices
- If a particular effect cannot deliver target performance (hey
blur()css filter), it cannot be included. - Guidelines on what to avoid when styling these affected elements (avoid expensive CSS)
- Deliver a builder so users can pull only the CSS they need.
- There is no hover on the mobile web, so any hover-based effects would be excluded or have a tap-based equivalent.
Action
- If you know other transition/animation based demos/experiments that make sense to include here, file a ticket.
- If you're interested in helping to define the API, let's hear it! File a ticket.
- A web-based builder is a must. A command-line builder isn't important for this.
Getting Started
Code Style Guide
General Inquiries & Support
- Effeckt.css Mailing List https://groups.google.com/d/forum/effeckt