https://github.com/eddyverbruggen/nativescript-keyframes

Facebook Keyframes plugin - if CSS animations don't cut it for ya
https://github.com/eddyverbruggen/nativescript-keyframes

animation facebook keyframes nativescript nativescript-plugin

Last synced: about 1 month ago
JSON representation

Facebook Keyframes plugin - if CSS animations don't cut it for ya

• Host: GitHub
• URL: https://github.com/eddyverbruggen/nativescript-keyframes
• Owner: EddyVerbruggen
• License: other
• Created: 2016-11-22T16:42:26.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-02T07:54:39.000Z (almost 8 years ago)
• Last Synced: 2024-10-02T07:59:27.806Z (about 2 months ago)
• Topics: animation, facebook, keyframes, nativescript, nativescript-plugin
• Language: JavaScript
• Size: 1.95 MB
• Stars: 33
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# NativeScript Facebook Keyframes plugin

{N} wrapper for [this awesome animation library](https://github.com/facebookincubator/Keyframes)



## Why use this?

Good question, as NativeScript already has [outstanding CSS animation support](https://docs.nativescript.org/ui/animation-css.html)!

Make sure you check that out as well, but if you or your designer is a sucker for __After Effects__

to create crazily complex (and beautiful) animations then this is the plugin for you.

## Installation

From the command prompt go to your app's root folder and execute:

```

tns plugin add nativescript-keyframes

```

## Demo app

Want to dive in quickly? Check out [the demo](demo). Which looks like __[this (YouTube video)](https://www.youtube.com/watch?v=eKHW8gSNpQc)__. Otherwise, continue reading.

You can run the demo app from the root of the project by typing `npm run demo.ios.device`.

## API

This plugin makes most sense when used from XML, which is done like this:

```xml

  

  

```

To make the image look transparent on Android currently,

you need to set the background color to that of the parent container, so in your `css` file add:

```css

.keyframe {

  background-color: #DDD;

}

```

The `source` property refers to a folder inside your app,

so in this case we expect this file: `app/keyframes/logo.json`