nativescript/animation-demo

A sample app demonstrating different kinds of animations achieved with CSS, keyframes and NativeScript.

NativeScript animation demo application

Open source cross-platform animation demo app built with NativeScript.

Use this application to find-out how to implement common animation scenarios with NativeScript.

Running the sample

1. Make sure you have the NativeScript Command-line Interface installed as well as all the prerequisites for the NativeScript development, described in the package page.

2. Install the dependencies of the sample (NativeScript modules and TypeScript compiler) and add the preferred platform-specific tools to the project library. Note that iOS development is only available with a Mac machine.

   `tns install`
   

3. Compile the TypeScript code

   `node_modules/typescript/bin/tsc -p .`
   

4. Run the project.

   tns run ios|android

animation-demo's Issues

Nativescript Playground version

Hi, would it be possible for you to create a {N} Playground version of this? I don't have the dev tools installed on my machine but would love to see how this works. Or perhaps post a video of the animations on the app?

Permenant animations using animate method?

When using keyframe animations we can specify fill-mode forwards to make the animation permenant.

Can we do this using the .animate method / API in typescript? How do we make an animation 'stick'?

Restructure this demo app

For example, it could have the following structure:

• Animations with code:
  • opacity
  • background color
  • ...
• Animations with CSS:
  • opaciity
  • background color
  • ...

Percentage for translate (100%, 0)

I have tried the ns-css-animation but translate(-100%, 0) worked as 100px;

Is these feature not supported? or coming soon? or am I doing something wrong. Thanks for the awesome framework.