top of page

Safari browser sometimes has issues displaying images...

I.e: *you have to click on the images to see them...

For a better browsing experience on Brainy-Bits

Please use Chrome, Edge or Firefox browser.

  • Writer's pictureBrainy-Bits

How to – Flip Book style Animation on a Nextion LCD


After publishing my last tutorial on the YouTube Subscriber counter, I got a couple of questions on how I created those animation that show up on the Nextion LCD Screen.

So here’s a ‘quick’ tutorial on how I did that.



NodeMCU V2

MAX7219 Matrix Module

Nextion LCD Display

These are Amazon affiliate links...

They don't cost you anything and it helps me keep the lights on

if you buy something on Amazon. Thank you!



When importing pictures in the Nextion software, each one is assigned an ID.  Which will be used later to create the animation.

To keep the pictures in the right order when you import them, make sure to give them a name that is sorted in the right order.

For example:  picture01, picture02, picture03, etc…

Once imported, you need to take note of the first picture ID of the animation and the last one to use in the code below.



Since the type of animation were creating, is like a flip book, we need to have a timer and a variable.

The timer will be used to decide how long to show a frame/picture ID before moving to the other.

The variable is used to store the picture ID.

The Setup:

On each Nextion ‘page’ we add a Timer and a Variable.

We make sure the variable value is set to the first frame of the animation picture ID.

Then we enter this code under the Timer:

tm0.en=1 tm0.tim=150 p0.pic=va0.val va0.val=va0.val+1 if(va0.val>4) {  va0.val=0 }

Basically line by line:

  • We start the timer

  • set the timer to 150ms

  • set the picture to be displayed to the variable value

  • increase the variable by one

  • If the variable is bigger than the last picture reset the variable to the first picture

  • everything repeats

To get more information, don’t forget to check out the tutorial video below.



The 2.8 inch Nextion I was using for the YouTube Subscriber counter project only had 4 megabytes of memory available, so I couldn’t make those animation very long without maxing out the memory available.

The Nextion Editor converts the images you upload to 16 bits, with no way to change it, so those small 6Kb pictures become 150Kb each!!!!!

Also make sure that you resize your picture to the resolution of the Nextion LCD you’re using.  The one I used was 320×240 pixels.



Has you saw in the tutorial video, we can test the animation by using the ‘Debug’ function inside the Nextion Editor.

To have the Arduino change the page is pretty easy by using the Nextion Library.

All you have to do is send the command:;;

You can find the complete Arduino code in the prior tutorial page.

As always check out the tutorial video for more information.



So there you go, creating simple animations using a Nextion LCD is pretty easy and might make a boring project more exciting!

Thanks for dropping by, and hope to see you in the next one.






Link to the libraries used in this tutorial:

1,889 views0 comments


All my content is and will always be Free.

If you feel that my Videos / Tutorials are helping, and you would like to contribute...

 You can toss some coins in the Tip Jar via PayPal.

Select amount then click the “Donate” button.

bottom of page