DEV Community

Cover image for Spinning Flower Animations with plain Javascript and CSS!
Anna Villarreal
Anna Villarreal

Posted on

Spinning Flower Animations with plain Javascript and CSS!

I made some spinning flower animations just for fun, that was a learning experience! I used some loops and arrays to accomplish this, and I am excited I got it to work. I hope you find these as fun as I do! I am excited to make more in the future. I ALMOST gave up on this. Glad I didn't!

This project was a bit of a journey, I struggled with getting the javascript and css to align just right. Lots of digging!

array of objects

I was very happy when I was finally able to get my array of objects appended to the DOM properly with css styling applied.

I then had to figure out how to get them aligned on top of each other.

aligning objects on top of each other

After some massive tinkering, I finally got them to align. NEVER TO FORGET AGAIN!!! XD

And after I got everything appearing and aligned, I was able to make a fun spinning flower animation with transitioning colors and positions.

project completion

It took me a little over a day to figure this out. If you are a beginner like me I encourage you to check out my code and see if you can figure out whats up! It's really awesome to build a thing and have it work. YAY! Here you go:

Top comments (0)