Best Post of the Month - April 2023
Tags: webdev, css, react, javascript
Published: 2023-04-29 16:24:04



### 1. [SVG sphere animation in React.js with anime.js](https://democoding.in/post/svg-sphere-animation-in-react-js-with-anime-js)

>In this blog post we animate the sphere using anime js in react js. There are many Javascript animation libraries out there, but Anime.js is one of the best. it's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.


![SVG sphere animation in React.js  with anime.js](https://i.ibb.co/y0D5mxh/ezgif-com-gif-maker-7.webp)

---
---

### 2. [Stepper Iteration in React JS with Anime JS](https://democoding.in/post/stepper-iteration-in-react-js-with-anime-js)

>In this blog post we animate the count box using anime js in react js. There are many Javascript animation libraries out there, but Anime.js is one of the best. it's easy to use, has a small and simple API, and offers everything you could want from a modern animation engine.


![Stepper Iteration in React JS with Anime JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogxof92u1wnd9z96fyzx.gif)

---
---


### 3. [Beautiful SVG Cat Animation in React](https://democoding.in/post/beautiful-svg-cat-animation-in-react)

![Lottie Animation in react](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjtm307wffi2c3t18uej.gif)

---
---


### 4. [CSS 3D Isometric Social Media Menu Hover Effects](https://democoding.in/post/css-3d-isometric-social-media-menu-hover-effects)

![CSS 3D Isometric Social Media Menu Hover Effects](https://i.ibb.co/ck1Mcjm/ezgif-com-crop.gif)

![CSS 3D Isometric Social Media Menu Hover Effects ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfnkyehbra9zzvq0o5zt.gif)

---
---


### 5. [How to create a scroll to top btn in react js](https://democoding.in/post/how-to-create-a-scroll-to-top-button-in-react)


![How to create a scroll to top btn in react js](https://i.ibb.co/h2GdS95/mobile.gif)


---
---


### 6. [Free 3D Illustrations library for your projects](https://democoding.in/post/free-3d-illustrations-library-for-your-projects)

![Casual life 3d icons](https://user-images.githubusercontent.com/92267283/231413615-559f3806-6514-4fa3-aa2a-90c594a4c890.png)

---
---


### 7. [25 Killer One-Liners in JavaScript](https://democoding.in/post/25-killer-one-liners-in-javascript)


>Some of the example 


### i. Detect Dark Mode

```js
const prefersDarkMode = window.matchMedia( "(prefers-color-scheme: dark)").matches; 
console.log(prefersDarkMode);
```
---

### ii. Remove falsy values from array

```js
const removeFalsy = (arr) => arr.filter(Boolean)

removeFalsy([0, 'a string', '', NaN, true, 5, undefined, 'another string', false]) // ['a string', true, 5, 'another string']
```

---

### iii. Shuffle an array

```js
const shuffle = arr => arr.sort(() => Math.random() - 0.5);

console.log(shuffle([1, 2, 3, 4, 5])); // [2, 5, 1, 4, 3] (output will vary)
```

---
---

### 8. [3D Card Hover Effect](https://democoding.in/post/3d-card-hover-effect)

![3D Card Hover Effect](https://camo.githubusercontent.com/f65ba4fc4ba41195a794db111a84bdc0c6bcb0ef947604f1f44562363422b380/68747470733a2f2f6465762d746f2d75706c6f6164732e73332e616d617a6f6e6177732e636f6d2f75706c6f6164732f61727469636c65732f6d66756771386c7a75346f626b773270316861302e676966)

---
---

### Free CSS Tools 

1. [CSS Glassmorphism Generator](https://democoding.in/css-glassmorphism-generator)

2. [Neumorphism CSS Generator](https://democoding.in/neumorphism-css-generator)

---
---

Thanks for Reading ❤️! Check my website [Demo coding](https://democoding.in/) for updates about my latest blog posts, video tutorials, and some cool web dev tips. Let's be friends!