In this tutorial I will show a very easy method to animate any element on scroll using scroll magic. Scrollmagic is the best library out there you can use to animate your website based on scroll action. It's very easy to use and its documentation is very well done. First of all make sure you add the library in your website and then you can add the required code for this animation. Be sure you add all scrollmagic required files to your website, otherwise the library won't work. Let us know in the comments section if you need any help with this step.

CSS Rotate Element On Scroll

In order to create this animation we need to add our HTML code.

<section>
<div id="trigger_element"></div>
<div class="rotate_element">
<img src="/my_img.jpg">
</div>
<div class="section_details">
<div class="title">
<h1>Section title</h1>
</div>
<div class="description">
<p>Lorem ipsum sit dolor aset met</p>
</div>
</div>
</section>

As you can see in the above structure, we have two main elements in the section. In the left side we have rotate_element div, in the right side we have section_details where is the title and the description of the section.

Let's add few lines of css to make the elements stay in its positions.

section{
  min-height:1000px;
  position:relative;
}
section .rotate_element,
section .section_details{
  display:inline-block;
  width:50%;
  vertical-align:middle;
  padding:0 15px;
}

Now, let's add the script for scroll magic. As you can see in the HTML structure we have a div #trigger_element, this div will be used to let scrollmagic know when it should start animate the div.

var controller = new ScrollMagic.Controller();
var rotate_circle = TweenMax.to("section .rotate_element", 0.5, {rotation: 360, ease: Linear.easeNone});
var scene_h = new ScrollMagic.Scene({triggerElement: "#trigger_element", duration: 1600}).setTween(rotate_circle).addTo(controller);

If you want the animation to be smooth or any effect you can change the duration parameter or the ease animation. You can play around with the parameters and change the way it animate the element as you wish.