react-flip-toolkit - A React FLIP animation library for highly configurable transitions

  •        46

A React FLIP animation library for highly configurable transitions

https://github.com/aholachek/react-flip-toolkit

Dependencies:

rematrix : ^0.2.2

Tags
Implementation
License
Platform

   




Related Projects

react-flip-move - Effortless animation between DOM changes (eg

  •    Javascript

This module was built to tackle the common but arduous problem of animating a list of items when the list's order changes. CSS transitions only work for CSS properties. If your list is shuffled, the items have rearranged themselves, but without the use of CSS. The DOM nodes don't know that their on-screen location has changed; from their perspective, they've been removed and inserted elsewhere in the document.

react-magic-hat - 🎩✨Library to implement the Magic Hat technique, blazingly fast πŸš€

  •    Javascript

React implementation of what I call the Magic Hat UI technique [DEMO]. πŸš€ Blazing fast. 60+ FPS hardware-accelerated CSS transforms, using the FLIP technique. Fluid and performant. Thanks to react-flip-move for that.

Flip-jQuery - Flip! is a jQuery plugin that enables card-flip animations with only css animation

  •    Javascript

Flip! is a jQuery plugin that enables card-flip animations with only css animation

flipjs - A helper library for doing FLIP animations.

  •    Javascript

A helper library for FLIP animations. FLIP is an approach to animations that remaps animating expensive properties, like width, height, left and top to significantly cheaper changes using transforms. It does this by taking two snapshots, one of the element's First position (F), another of its Last position (L). It then uses a transform to Invert (I) the element's changes, such that the element appears to still be in the First position. Lastly it Plays (P) the animation forward by removing the transformations applied in the Invert step.

gifsicle - Create, manipulate, and optimize GIF images and animations

  •    C

Gifsicle manipulates GIF image files. Depending on command line options, it can merge several GIFs into a GIF animation; explode an animation into its component frames; change individual frames in an animation; turn interlacing on and off; add transparency; add delays, disposals, and looping to animations; add and remove comments; flip and rotate; optimize animations for space; change images' colormaps; and other things. Gifview, a companion program, displays GIF images and animations on an X display. It can display multi-frame GIFs either as slideshows, displaying one frame at a time, or as real-time animations.


flipping - Flipping awesome animations.

  •    TypeScript

A library (and collection of adapters) for implementing FLIP transitions. In your HTML, add the data-flip-key="..." attribute to shared elements (see HTML example below).

react-native-animatable - Standard set of easy to use animations and declarative transitions for React Native

  •    Javascript

To make looping animations simply set the iterationCount to infinite. Most animations except the attention seekers work best when setting direction to alternate. You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a duration property, a spring animation will be used.

giflossy - Lossy GIF compressor (please report bugs/PRs to the gifsicle project)

  •    C

This is a fork of Gifsicle with lossy compression option. Gifsicle manipulates GIF image files. Depending on command line options, it can merge several GIFs into a GIF animation; explode an animation into its component frames; change individual frames in an animation; turn interlacing on and off; add transparency; add delays, disposals, and looping to animations; add and remove comments; flip and rotate; optimize animations for space; change images' colormaps; and other things.

react-move - React Move πŸŒ€ Beautiful, data-driven animations for React

  •    Javascript

Beautiful, data-driven animations for React. React-move allows you to define your animations using durations, delays and ease functions. In react-motion you use spring configurations to define your animations.

lottie-ios - An iOS library to natively render After Effects vector animations

  •    Objective-C

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with bodymovin and renders the vector animations natively on mobile and through React Native!

react-native-magic-move - Create magical move transitions between scenes in react-native 🐰🎩✨

  •    Javascript

A follow up project called react-native-shared-element has been created which can be considered the successor to react-native-magic-move. It it an all native solution that provides superior performance (no more passes over the react-native bridge) and transitions. It however does not support some of the more exotic transition types (flip, shrinkAndGrow) that Magic Move does. It also doesn't support the web-platform yet and requires native extensions to run. New users are advised to use react-native-shared-element when possible. As for Magic Move, no more new developments will be started for Magic Move, merely critical bug-fixes. This notification will be updated as development on react-native-shared-element progresses. * The native extensions are recommended to get the best performance, but they are not required. This makes it possible to use react-native-magic-move with expo or react-native-web. If you're having trouble installing the native extensions, please see this guide on how to install them manually.

react-web-animation - React components for the Web Animations API - http://react-web-animation

  •    Javascript

react-web-animation is a set of React components that expose the Web Animations API in a declarative way. Want to know more about the Web Animations API? Here are some great resources.

yubaba - is an element to element animation orchestrator for React.js ✨

  •    TypeScript

Complex page transitions are becoming more common on the web but we're still at a point where we need to write a lot of boilerplate to make it happen, worse yet disjointed parts of our apps needing to know about each other to make it all work. Yubaba tries to solve this by allowing disjointed parts of your app define what animations they want to happen when a matching partner is found, without explicit knowledge of each other.

GC3DFlipTransitionStyleSegue - iBooks-style 3D flip transition animation rendered in OpenGL ES 2

  •    Objective-C

iBooks-style 3D flip transition animation rendered in OpenGL ES 2.0 and wrapped in a UIStoryboardSegue subclass. GC3DFlipTransitionStyleSegue requires iOS 5.0 and above.

react-native-animation-book - A book talking about react-native animations, and walking you through from beginner to expert

  •    HTML

If you don't care about anything just jump to the Basic Animation Examples which will eventually guide you from basic to advanced animations and allow you to experience the capabilities of React Native animations. React Native has had a fantastic reception. There have already been a ton of great applications built using React Native. However one hugely important part of mobile applications is animations. React on the web has generally been pretty poor at dealing with animations, but there are some great people out there attempting to solve this problem. One such solution is react-motion https://github.com/chenglou/react-motion/.

react-transition-group - An easy way to perform animations when a React component enters or leaves the DOM

  •    Javascript

ATTENTION! To address many issues that have come up over the years, the API in v2 is not backwards compatible with the original React addon (v1-stable).For a drop-in replacement for react-addons-transition-group and react-addons-css-transition-group, use the v1 release, which is still actively maintained. Documentation and code for that release are available on the v1-stable branch.

VCTransitionsLibrary - A collection of iOS7 animation controllers and interaction controllers, providing flip, fold and all kinds of other transitions

  •    Objective-C

With iOS 7 you can easily create custom view controller transitions that can be used in a range of contexts (push, pop, modal …). This project provides a library of custom animations which can be dropped directly into your project. It also has a number of 'interaction controllers' which can be used with any of the custom animations in order to make your transitions interactive. The library currently contains the following animations, which can be made interactive with either a swipe or pinch gesture.

ImageMagick

  •    C++

ImageMagick is a software suite to create, edit, and compose bitmap images. It can read, convert and write images in a variety of formats (over 100) including DPX, EXR, GIF, JPEG, JPEG-2000, PDF, PhotoCD, PNG, Postscript, SVG, and TIFF. Use ImageMagick to translate, flip, mirror, rotate, scale, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.

react-native-spruce - ReactNative Bridge for Native Spruce Animation Library

  •    Javascript

Spruce is a lightweight animation library that helps choreograph the animations on the screen. With so many different animation libraries out there, developers need to make sure that each view is animating at the appropriate time. Spruce can help designers request complex multi-view animations and not have the developers cringe at the prototype.

react-animations - A collection of animations for inline style libraries

  •    Javascript

A collection of animations that can be used with any inline style library that supports using objects to define keyframe animations, such as Radium or Aphrodite. React-animations implements all animations from animate.css.Check out the interactive demo.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.