NativeScript Animation of ANY View Property

You can animate any view in NativeScript and any property, not just the ones that CSS exposes or the NativeScript Animation API allows you to manipulate. In this NativeScript tutorial I explain how to build up an animation from scratch, and you can reuse these animation functions in NativeScript Core, NativeScript Angular, and NativeScript Vue projects.

JavaScript animations can handle things that CSS can’t.
For instance, moving along a complex path, with a timing function different from Bezier curves. An animation can be implemented as a sequence of frames by making small changes to UI View properties.

► SHARE
Share this video with a friend to help them animate their native JavaScript apps:
Share the entire NativeScript playlist to help your friends with their native iOS and Android apps written with JavaScript:

► ASK
If you have a topic you want me to make a video about use #iscriptnative in the comments.

►LET'S CONNECT

► FREE + PREMIUM NATIVESCRIPT COURSES
Take 25% off any premium NativeScript course by using the coupon code YOUTUBE

[AZisk]

Thanks to those folks who submitted comments, keep them coming!

[MerooMaher]

You know what your explanation is very simple and clear makes me to understand very well the promise even that video was not for it .... again I love it thank you so much

[giraserakesh]

Thank you for the great content. I will like to see more on user interface testing in Nativescript😊

[lfsamp]

Hi Alex, This is very nice video. I just add that feature on my project. Thanks so much.

”Some of these math functions are little ’out there’...”

I couldn’t agree more... 😅

[Priya-abc]

sir make more tutorials on nativescript core with javascript

[radesmr]

Very cool tutorial.
Any GitHub link for animation-helpers ?

[AITwo_co]

I wish I could give 1000 likes to this video

[MultiShiv]

This was brilliant! 😃 Why not make a plugin out of this? :)

[Serga]

Hey Alex! Thanks for these cool videos on NS!
I keep wondering watching your videos how is it that your emulator updates so fast? Also you barely ever have to restart the app.
Im working with Vue-flavored NS and I pretty much have to restart the npm script every time I make a change that's not a style update.
Also my emulator looks different, with all the buttons around. How come urs seem headless?


Again, thanks for the fantastic content and keep up the good work!

[michael_kh]

Cool thanks. What about animating svg? For example stroke-dasharray preloader
Do u have some solutions?

[corsaronero]

that's awsome. Alex may i ask for your opion about PWA app? are they going to replace framework to build up mobile up? thanks

[johnwall]

Is it possible to have an animation on the splashscreen before the app starts? Any help appreciated

[reecereynolds]

Thank you for the video! I have all this working correctly but is there a way to loop these animations?