Frontend Shorts: How to rotate the element on scroll with JavaScript
Tags: javascript, webdev, css, frontend
Published: 2020-04-04 11:06:28

---
title: Frontend Shorts: How to rotate the element on scroll with JavaScript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zb3td4t9s1iap0u8gf5x.jpg
published: true
description: I wanted to rotate an SVG reload-icon inside the circle by scrolling up and down on the web view without using any JavaScript library like jQuery or React.
tags: javascript, webdev, css, frontend
---

While building the animated spinner on scroll for the landing page, I thought how can be done quickly and in a few lines of code with JavaScript.

**I wanted to rotate an SVG reload-icon inside the circle by scrolling up and down on the web view without using any JavaScript library like jQuery or React.**

So instead, I achieved this result in a quite simple way using DOM JavaScript. Let me show you my practical implementation below:

To separate the solution from the project code, I created three files for this example: `index.html`, `index.css`, and `index.js`.

Let's mark up a green-yellow circle with reload icon in its center:

```html
<!-- index.html -->
<html>
	<head>
		...
		<link rel="stylesheet" href="index.css"> 
	</head>
	<body>
		<div class="wrapper">
    			<div class="circle">
        			<img id="reload" src="reload-solid.svg" alt="scroll">
    			</div>
		</div>
		<script src="index.js"></script>
	</body>
</html>
```

According to the HTML-tree, next, I style the elements with CSS:

```css
/* index.css */
body {
    height: 3000px;
}

.wrapper {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
}

.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: greenyellow;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

#reload {
    width: 50px;
    height: 50px;
}
```

❗️**Notice that the height prop of the body is 3000px, it's needed to show you the rotation of the reload icon inside the green-yellow circle by scrolling.** 

Besides, I have centered the circle element vertically and horizontally for better preview. You can see in the `circle` class.

![Styled Element](https://dev-to-uploads.s3.amazonaws.com/i/ui6fwnhbhwgvwngmy3dw.png)

**Next, we need to add a rotation effect to the element on the scroll:**

1. Create a function `onscroll(),` which will call `scrollRotate()` function in DOM.

2. Find the reload-icon element via id, which will rotate by scrolling and store it into the `image` variable.

3. Use `transform` CSS-property to manipulate the reload-icon element by rotating.

4. Apply `Window.pageYOffset`property [that will return the number of pixels the document is currently scrolled along the vertical axis (up/down)](https://developer.mozilla.org/en-US/docs/Web/API/Window/pageYOffset).

```javascript
// index.js
window.onscroll = function () {
    scrollRotate();
};

function scrollRotate() {
    let image = document.getElementById("reload");
    image.style.transform = "rotate(" + window.pageYOffset/2 + "deg)";
}
```

👉 `Window.pageYOffset/2` allows making the element rotation faster. **The lower number, the faster rotation. The higher number, the slower rotation.**

![Rotated](https://dev-to-uploads.s3.amazonaws.com/i/sikhv0gt3cqfabzs0lci.gif)

What we do (I mean frontend developers) is not all that unique. Often we face the problem that seems easy to solve and later refactor it to the more elegant and readable solution.

**Thank you for reading! 🙏**

If you liked and found this frontend short practical, it would make me happy if you shared it on Twitter.

Code your best,
Ilona Codes

___

_Photo by Kristaps Grundsteins on Unsplash_