Hi folks! few months ago I created a boombox illustration by only using css.
Now I am looking forward to animate it.
As I am new to animation. I researched a little and found about
animate.css. I decided to use it instantly because its pretty simple and easy. Like you animate your component with just one line of code.
So basically I wanted to animate the speakers as showing beat effect. For this I added this class to my inner speaker
className="animate__animated animate__heartBeat animate__fast animate__infinite"
here I used
heartBeat animation type and specifies its speed as
and here is the result
I know its pretty raw right now and I am working on it still. My idea is to add music notes floating around and on and off button to start and stop the music.
Also It will be helpful if you suggest me animation articles or tutorials in comments.
Thanks for reading and keep creating! ✨