DEV Community

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

Posted on

1

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:

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay