Develop Reference

How do I perform a rotation animation on top of a base angle other than 0?

In JS I have some code that transform rotates the heads of my three sprites to follow the cursor on the screen. Additionally, I have a CSS keyframe animation I made to sort of "rattle the heads". My issue is, that this animation uses what seems to be a datum of 0deg and I want it to instead use the current angle with the mouse as the centre.
I have this value as angle1, 2, 3, in JS but not in CSS. Is there a way to use this angle in CSS? So instead my animation would do something like transform: rotate(baseAngle + 90) etc? See below for SC.
I also a feel a gif of the behaviour is pretty valuable here:
https://gyazo.com/90855776c7803c63b72d378cb4a3c194
JS for tracking mouse movement:
(function() {
document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
var scrollMaxY, dot, eventDoc, doc, body, pageX, pageY;
// IE-isms
event = event || window.event;
maxY = window.innerHeight || (document.documentElement.innerHeight - document.documentElement.clientHeight)
// If pageX/Y aren't available and clientX/Y are,
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
// TODO: Use x/y values to rotate heads
angle1 = Math.atan2( event.pageY - head1[0], event.pageX - head1[1]);
angle2 = Math.atan2( event.pageY - head2[0], event.pageX - head2[1]);
angle3 = Math.atan2( event.pageY - head3[0], event.pageX - head3[1]);
$("#kodama-head1").css("transform", "rotate(" + angle1 + "rad)");
$("#kodama-head2").css("transform", "rotate(" + angle2 + "rad)");
$("#kodama-head3").css("transform", "rotate(" + angle3 + "rad)");
}
})();
My CSS keyframes animation:
#keyframes RattleHeads {
0% {
transform: rotate(90deg);
-webkit-transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
55% {
transform: rotate(-60deg);
}
69% {
transform: rotate(45deg);
}
78% {
transform: rotate(-30deg);
}
85% {
transform: rotate(20deg);
}
91% {
transform: rotate(-15deg);
}
95% {
transform: rotate(10deg);
}
98% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
Lastly, the JS being used to apply rattling animation:
$("body").click(function(){
var KodamaHead;
var random = Math.random() * 3;
if (random > 2){
KodamaHead = $("#kodama-head3");
}
else if (random > 1){
KodamaHead = $("#kodama-head2");
}
else{
KodamaHead = $("#kodama-head1");
}
// add animation
KodamaHead.addClass("rattling");
// remove animation on completion
KodamaHead.one("webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend",
function(e) {
$(this).removeClass("rattling");
});
});

Simply wrap your head element inside an other element.
The transform of the inner element will now be relative to the one of the wrapper.
In the following example, we apply the mouse driven rotation to the inner .head elements, while applying the CSS driven one (onclick) on the .wrapper elements.
Since here both share the same transform-origin , it could also have been done the other way around.
$("body").click(function() {
var random = Math.floor(Math.random() * 3);
// Target one of the `.wrapper` elements
var KodamaHead = $('.persona .wrapper').eq(random);
// add animation
KodamaHead.addClass("rattling");
// remove animation on completion
KodamaHead.one("webkitAnimationEnd oanimationend oAnimationEnd msAnimationEnd animationend",
function(e) {
$(this).removeClass("rattling");
});
});
(function() {
// get Elements rotation anchor
var head1 = getAnchor('#kodama-head1');
var head2 = getAnchor('#kodama-head2');
var head3 = getAnchor('#kodama-head3');
document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
// removed some backward compatibility fluffs
// feel free to add it back
// calculations were off by half a π
angle1 = Math.atan2(event.pageY - head1[0], event.pageX - head1[1]) - Math.PI / 2;
angle2 = Math.atan2(event.pageY - head2[0], event.pageX - head2[1]) - Math.PI / 2;
angle3 = Math.atan2(event.pageY - head3[0], event.pageX - head3[1]) - Math.PI / 2;
$("#kodama-head1").css("transform", "rotate(" + angle1 + "rad)");
$("#kodama-head2").css("transform", "rotate(" + angle2 + "rad)");
$("#kodama-head3").css("transform", "rotate(" + angle3 + "rad)");
}
})();
// get anchor position (center, center)
function getAnchor(sel) {
var el = document.querySelector(sel),
rect = el.getBoundingClientRect();
return [rect.top + rect.height / 2, rect.left + rect.width / 2];
}
.rattling {
animation: RattleHeads 2s linear;
}
.persona {
display: inline-block;
height: 90vh;
width: 20vw;
border: 1px solid;
}
.head {
display: inline-block;
height: 20vw;
width: 20vw;
border: 1px solid;
position: relative;
}
.head::before,
.head::after {
content: '•';
color: white;
font-size: 18px;
line-height: 12px;
width: 2vmax;
height: 2vmin;
position: absolute;
top: 5vw;
left: 7vw;
background: black;
border-radius: 20%;
}
.head::after {
left: auto;
right: 7vw;
}
#keyframes RattleHeads {
0% {
transform: rotate(0deg);
}
55% {
transform: rotate(-60deg);
}
69% {
transform: rotate(45deg);
}
78% {
transform: rotate(-30deg);
}
85% {
transform: rotate(20deg);
}
91% {
transform: rotate(-15deg);
}
95% {
transform: rotate(10deg);
}
98% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="persona">
<div class="wrapper"><!-- rattling -->
<div id="kodama-head1" class="head"><!-- look-at -->
</div>
</div>
</div>
<div class="persona">
<div class="wrapper"><!-- rattling -->
<div id="kodama-head2" class="head"><!-- look-at -->
</div>
</div>
</div>
<div class="persona">
<div class="wrapper"><!-- rattling -->
<div id="kodama-head3" class="head"><!-- look-at -->
</div>
</div>
</div>

How to switch between transform-origin and scrollbars

I have this code above who switch between CSS transform-origin and scale to CSS width and scrollbars.
I need to make this switch because I am having a pinch to zoom for a DIV wrap I'm using in my website.
I'm using CSS translateX and translateY and Scale for a smoother pinch zoom, but after the zoom take place, I need to return back to width and scrollbar so the user can move across the layout.
I have here an example of how I'm doing the switch and there is a bit margin on top that I can't really set mind my on.
what is the correct way to do so?
var isOrigin = false;
var originX = 500;
var originY = 200;
var scale = 1.5;
var deltaX = 0;
var deltaY = 0;
var from_origin_to_scroll = function () {
if (isOrigin) { from_scroll_to_origin(); return; }
var wrap = $('.containter .wrap');
//reset scroll
const el = document.scrollingElement || document.documentElement;
$('.containter')[0].scrollLeft = 0;
el.scrollTop = 0;
wrap.css({
transformOrigin: originX + "px " + originY + "px",
transform: "translate3d(" + deltaX + "px," + deltaY + "px, 0) " +
"scale3d(" + scale + "," + scale + ", 1) ",
width: 100 + '%'
});
isOrigin = true;
$('.info').html('layout set by origin and scale');
}
var from_scroll_to_origin = function () {
var wrap = $('.containter .wrap');
wrap.css({
transformOrigin: originX + "px " + originY + "px",
transform: "translate3d(" + 0 + "px," + 0 + "px, 0) " +
"scale3d(" + 1 + "," + 1 + ", 1) ",
width: (100 * scale) + '%'
});
$('.containter')[0].scrollLeft = originX * (scale - 1);
const el = document.scrollingElement || document.documentElement;
el.scrollTop = originY * (scale - 1);
isOrigin = false;
$('.info').html('layout set by width and scroll');
}
body {
margin: 0;
padding: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width:100vw;
}
.top{
position: fixed;
width: 100%;
background-color: #333;
line-height: 40pt;
text-align: center;
color: #f1f1f1;
font-size: 20pt;
left: 0;
top: 0;
z-index: 10;
}
.top .info{
}
.header_content
{
background-color: #e1e1e1;
line-height:130pt;
}
.containter {
width:100%;
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.containter .wrap {
display: flex;
flex-direction: column;
width: 100%;
}
.containter .wrap img {
width: 100%;
margin-top: 30pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="info" onclick="from_origin_to_scroll()">click to switch</div>
</div>
<div class="header_content">
this is a header content - needs to be added to overall calculation
</div>
<div class="containter">
<div class="wrap">
<img src="https://thumb7.shutterstock.com/display_pic_with_logo/91858/594887747/stock-photo-dreams-of-travel-child-flying-on-a-suitcase-against-the-backdrop-of-sunset-594887747.jpg" />
<img src="https://thumb9.shutterstock.com/display_pic_with_logo/1020994/556702975/stock-photo-portrait-of-a-happy-and-proud-pregnant-woman-looking-at-her-belly-in-a-park-at-sunrise-with-a-warm-556702975.jpg" />
<img src="https://thumb7.shutterstock.com/display_pic_with_logo/234100/599187701/stock-photo-funny-little-girl-plays-super-hero-over-blue-sky-background-superhero-concept-599187701.jpg" />
<img src="https://thumb1.shutterstock.com/display_pic_with_logo/1316512/661476343/stock-photo-funny-pineapple-in-sunglasses-near-swimming-pool-661476343.jpg" />
<img src="https://thumb1.shutterstock.com/display_pic_with_logo/2114402/689953639/stock-photo-adult-son-hugging-his-old-father-against-cloudy-sky-with-sunshine-689953639.jpg" />
<img src="https://thumb7.shutterstock.com/display_pic_with_logo/172762/705978841/stock-photo-businessman-looking-to-the-future-for-new-business-opportunity-705978841.jpg" />
</div>
</div>

In your case the possible solution is to detect when the user is trying to zoom, and when just to scroll.
const $container = $(".container");
$container.on('touchstart', function (e) {
if (e.touches.length > 1){
//more than one finger is detected on the screen,
//change mode to transform-origin
from_scroll_to_origin()
}
});
$container.on('touchend', function (e) {
//change mode to scrollbars
from_origin_to_scroll()
});

Problems calculating rotation degrees

Got some math issues in my code that i can't figure out.
When you press on one of the red circles it should take the closest path (left or right) and rotate down to the bottom, it's kinda working, but there are a few issues with it.
e.g. If you start by pressing '8' and then '3', the container is only rotating 45 degrees in the wrong direction.
And the second issue is that the numbers are spinning around when the wheel is rotating.
Here is a jsfiddle to the code: https://jsfiddle.net/she4x2w6/10/
$('.item').click(function() {
var currentId = $('#container').data('id');
var nextId = $(this).data('id');
var currentRotation = (360 / items.length) * currentId - (360 / items.length);
var nextRotation = (360 / items.length) * nextId - (360 / items.length);
var deg;
if (currentRotation - nextRotation > 180 || nextRotation - currentRotation > 180) {
deg = nextRotation > 180 ? 360 - nextRotation : nextRotation - 360;
} else {
deg = -Math.abs(nextRotation);
}
var itemDeg = nextRotation <= 180 ? nextRotation : -Math.abs(360 - nextRotation);
$('#container').css({
transition: 'transform 0.6s',
transform: 'rotate(' + deg + 'deg)'
})
$('.item').css({
transition: 'transform 0.6s',
transform: 'rotate(' + itemDeg + 'deg)'
})

CSS rotate() function rotates an element to given angle while you are trying to rotate your element by a given angle.
rotate() -CSS | MDN
I had to change some of your approach to get it working:
var radius = 100; // adjust to move out items in and out
var items = $('.item'),
container = $('#container'),
width = container.width(),
height = container.height();
var angle = 0,
step = (2 * Math.PI) / items.length,
angle = Math.PI/2;
items.each(function() {
var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2);
var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2);
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
$('#container').data('deg', 0);
$('.item').click(function() {
var currentId = $('#container').data('id');
var nextId = $(this).data('id');
var currentDeg =$('#container').data('deg');
var deg;
var degg = ((nextId+items.length-1)%items.length)*(360 / items.length);
if (degg>=180) {
deg = 360-degg;
} else {
deg = -degg;
}
var t = (currentDeg - deg) % 360;
if (t<0) {
t = 360+t;
}
if (t<180) {
deg = currentDeg-t;
} else {
deg = currentDeg+360-t;
}
var itemDeg = -deg;
var time = Math.abs(deg-currentDeg)/100;
$('#container').css({
transition: 'transform ' + time + 's',
transform: 'rotate(' + deg + 'deg)'
})
$('.item').css({
transition: 'transform ' + time + 's',
transform: 'rotate(' + itemDeg + 'deg)'
})
$('#container').data('id', nextId).data('deg', deg);
});
body {
padding: 2em;
}
#container {
width: 200px;
height: 200px;
margin: 10px auto;
border: 1px solid #000;
position: relative;
border-radius: 50%;
}
.item {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
position: absolute;
background: #f00;
}
.item p {
margin: 0;
}
.active .item-content {
opacity: 1 !important;
transition: opacity ease 0.6s;
}
.item .item-content {
opacity: 0;
transition: opacity ease 0.3s;
margin: auto;
position: absolute;
width: 230px;
transform: translate(-50%);
left: 50%;
pointer-events: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-id="1">
<div data-id="1" class="item">1</div>
<div data-id="2" class="item">2</div>
<div data-id="3" class="item">3</div>
<div data-id="4" class="item">4</div>
<div data-id="5" class="item">5</div>
<div data-id="6" class="item">6</div>
<div data-id="7" class="item">7</div>
<div data-id="8" class="item">8</div>
<div data-id="9" class="item">9</div>
</div>

Animating newly created objects with different keyframes values

So I'm trying to make simple animation. When you press somewhere inside blue container, a circle should be created in this place and then go up. After some research I found how to put JS values into keyframes, but it's changing values for every object not just for freshly created. If you run snipped and press somewhere high and then somewhere low you will see what I'm talking about.
I found some AWESOME solution with Raphael library, but I'm a beginner and I'm trying to make something like this in JS. Is it even possible? How?
var bubble = {
posX: 0,
posY: 0,
size: 0
};
var aquarium = document.getElementById("container");
var ss = document.styleSheets;
var keyframesRule = [];
function findAnimation(animName) { //function to find keyframes and insert replace values in them
for (var i = 0; i < ss.length; i++) {
for (var j = 0; j < ss[i].cssRules.length; j++) {
if (window.CSSRule.KEYFRAMES_RULE == ss[i].cssRules[j].type && ss[i].cssRules[j].name == animName) {
keyframesRule.push(ss[i].cssRules[j]);
}
}
}
return keyframesRule;
}
function changeAnimation (nameAnim) { //changing top value to cursor position when clicked
var keyframesArr = findAnimation(nameAnim);
for (var i = 0; i < keyframesArr.length; i++) {
keyframesArr[i].deleteRule("0%");
keyframesArr[i].appendRule("0% {top: " + bubble.posY + "px}");
}
}
function createBubble(e) {
"use strict";
bubble.posX = e.clientX;
bubble.posY = e.clientY;
bubble.size = Math.round(Math.random() * 100);
var bubbleCircle = document.createElement("div");
aquarium.appendChild(bubbleCircle);
bubbleCircle.className = "bubble";
var bubbleStyle = bubbleCircle.style;
bubbleStyle.width = bubble.size + "px";
bubbleStyle.height = bubble.size + "px";
bubbleStyle.borderRadius = (bubble.size / 2) + "px";
//bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
changeAnimation("moveUp");
bubbleCircle.className += " animate";
}
aquarium.addEventListener("click", createBubble);
//console.log(bubble);
body {
background-color: red;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: fixed;
top: 80px;
left: 0;
background-color: rgb(20,255,200);
}
#surface {
width: 100%;
height: 40px;
position: fixed;
top: 40px;
opacity: 0.5;
background-color: rgb(250,250,250);
}
.bubble {
position: fixed;
border: 1px solid blue;
}
.animate {
animation: moveUp 5s linear;//cubic-bezier(1, 0, 1, 1);
-webkit-animation: moveUp 5s linear;//cubic-bezier(1, 0, 1, 1);
}
#keyframes moveUp{
0% {
top: 400px;
}
100% {
top: 80px;
}
}
#-webkit-keyframes moveUp{
0% {
top: 400px;
}
100% {
top: 80px;
}
}
<body>
<div id="container">
</div>
<div id="surface">
</div>
</body>

Here is a possible solution. What I did:
Remove your functions changeAnimation () and findAnimation() - we don't need them
Update the keyframe to look like - only take care for the 100%
#keyframes moveUp { 100% {top: 80px;} }
Assign top of the new bubble with the clientY value
After 5 seconds set top of the bubble to the offset of the #container(80px) - exactly when animation is over to keep the position of the bubble, otherwise it will return to initial position
var bubble = {
posX: 0,
posY: 0,
size: 0
};
var aquarium = document.getElementById("container");
function createBubble(e) {
"use strict";
bubble.posX = e.clientX;
bubble.posY = e.clientY;
bubble.size = Math.round(Math.random() * 100);
var bubbleCircle = document.createElement("div");
aquarium.appendChild(bubbleCircle);
bubbleCircle.className = "bubble";
var bubbleStyle = bubbleCircle.style;
bubbleStyle.width = bubble.size + "px";
bubbleStyle.height = bubble.size + "px";
bubbleStyle.borderRadius = (bubble.size / 2) + "px";
bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
bubbleCircle.className += " animate";
// The following code will take care to reset top to the top
// offset of #container which is 80px, otherwise circle will return to
// the position of which it was created
(function(style) {
setTimeout(function() {
style.top = '80px';
}, 5000);
})(bubbleStyle);
}
aquarium.addEventListener("click", createBubble);
body {
background-color: red;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: fixed;
top: 80px;
left: 0;
background-color: rgb(20, 255, 200);
}
#surface {
width: 100%;
height: 40px;
position: fixed;
top: 40px;
opacity: 0.5;
background-color: rgb(250, 250, 250);
}
.bubble {
position: fixed;
border: 1px solid blue;
}
.animate {
animation: moveUp 5s linear;
/*cubic-bezier(1, 0, 1, 1);*/
-webkit-animation: moveUp 5s linear;
/*cubic-bezier(1, 0, 1, 1);*/
}
#keyframes moveUp {
100% {
top: 80px;
}
}
#-webkit-keyframes moveUp {
100% {
top: 80px;
}
}
<body>
<div id="container"></div>
<div id="surface"></div>
</body>
The problem about your code was that it is globally changing the #keyframes moveUp which is causing all the bubbles to move.

The problem with your code is that you're updating keyframes which are applied to all bubbles. I tried another way of doing it by using transition and changing the top position after the element was added to the DOM (otherwise it wouldn't be animated).
The main problem here is to wait the element to be added to the DOM. I tried using MutationObserver but it seems to be called before the element is actually added to the DOM (or at least rendered). So the only way I found is using a timeout which will simulate this waiting, although there must be a better one (because it may be called too early, causing the bubble to directly stick to the top), which I would be happy to hear about.
var bubble = {
posX: 0,
posY: 0,
size: 0
};
var aquarium = document.getElementById("container");
function createBubble(e) {
"use strict";
bubble.posX = e.clientX;
bubble.posY = e.clientY;
bubble.size = Math.round(Math.random() * 100);
var bubbleCircle = document.createElement("div");
aquarium.appendChild(bubbleCircle);
bubbleCircle.classList.add("bubble");
var bubbleStyle = bubbleCircle.style;
bubbleStyle.width = bubble.size + "px";
bubbleStyle.height = bubble.size + "px";
bubbleStyle.borderRadius = (bubble.size / 2) + "px";
bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
setTimeout(function() {
bubbleCircle.classList.add("moveUp");
}, 50);
}
aquarium.addEventListener("click", createBubble);
body {
background-color: red;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: fixed;
top: 80px;
left: 0;
background-color: rgb(20, 255, 200);
}
#surface {
width: 100%;
height: 40px;
position: fixed;
top: 40px;
opacity: 0.5;
background-color: rgb(250, 250, 250);
}
.bubble {
position: fixed;
border: 1px solid blue;
transition: 5s;
}
.moveUp {
top: 80px !important;
}
<body>
<div id="container">
</div>
<div id="surface">
</div>
</body>
Also, I used the classList object instead of className += ... because it is more reliable.

Rotating an image when user scrolls up and down the screen

I am fairly new to writing in html, css, and coding in javascript.
I digress; i am trying to have an image of a gear rotate when the a user scrolls up and down the screen (i am hoping to give it an elevator effect when i add a belt).
I am using the jquery $(window).scroll(function(). I know it is working because when i use console.log("hi") it writes every time i scroll. My problem is the .animate() function that doesn't seem to work. I even tried downloading "http://jqueryrotate.com/" and using that to rotate.
Any help would be much appreciated!
## HTML ##
<div class="left_pulley">
<img src="gear2.png" />
</div>
<div class="right_pulley">
<img src="gear2.png" />
</div>
## CSS ##
.left_pulley
{
position: absolute;
margin: 0;
padding: 0;
top: 263px;
left: 87%;
height: 35px;
width: 35px;
}
.left_pulley img
{
width: 100%;
}
.right_pulley
{
position: absolute;
margin: 0;
padding: 0;
top: 263px;
left: 94.2%;
height: 35px;
width: 35px;
}
.right_pulley img
{
width: 100%;
}
## JS ##
First using .rotate({})
$(".left_pulley").rotate({bind:
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$(.left_pulley).rotate({
angle: 0,
animateTo: 180,
})
})
})
})
Now using .animate({}) to try and just move it at all.
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
var scott = $('img');
scott.animate({
left: 180
}
}
});
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
var scott = $('img');
scott.animate({
left: 180
}
function() {
console.log("hi");
}
});
console.log("hi2");
}
});
.left_pulley {
position: absolute;
margin: 0;
padding: 0;
top: 263px;
left: 87%;
height: 35px;
width: 35px;
}
.left_pulley img {
width: 100%;
}
.right_pulley {
position: absolute;
margin: 0;
padding: 0;
top: 263px;
left: 94.2%;
height: 35px;
width: 35px;
}
.right_pulley img {
width: 100%;
}
<div class="left_pulley">
<img src="gear2.png" />
</div>
<div class="right_pulley">
<img src="gear2.png" />
</div>
[
picture of gears i want to rotate.
]1

You should look into the CSS3 transform property, more specifically the rotate() function. Here
It would also be beneficial to add a transistion property to create an animated 'tween' between rotation values. Here. Make sure to add this transition to the transition property (as this is where rotation is set).\
You can then change the rotation of the gear (with automatic animation!) using jquery by setting the css value of the transition property, for example:
#gear{
transition: transform 300ms;
transform: rotate(7deg);
transform-origin:90% 90%;
position:absolute;
left:100px;
top:100px;
font-size:10rem;
width:100px;
height:100px;
}
You can test it out here by hitting run.
https://jsfiddle.net/oc4hhons/

Borrowing heavily from https://stackoverflow.com/a/17348698/2026508
You could do something like this:
var degrees = 0;
var prevScroll = 0;
$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
if (prevScroll > $(window).scrollTop()) {
$('.woo').css({
'-webkit-transform': 'rotate(' + degrees+++'deg)',
'-moz-transform': 'rotate(' + degrees+++'deg)',
'-ms-transform': 'rotate(' + degrees+++'deg)',
'transform': 'rotate(' + degrees+++'deg)'
});
console.log('prevScroll greater:', prevScroll)
} else if (prevScroll < $(window).scrollTop()) {
$('.woo').css({
'-webkit-transform': 'rotate(' + degrees--+'deg)',
'-moz-transform': 'rotate(' + degrees--+'deg)',
'-ms-transform': 'rotate(' + degrees--+'deg)',
'transform': 'rotate(' + degrees--+'deg)'
});
console.log('prevScroll less:', prevScroll)
}
prevScroll = $(window).scrollTop()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 40px; width: 100px;background-image: url(' gear2.png ');background-color:blue;" class="woo">turn</div>

JS Fiddle-Updated, now they rotate together same direction but the rotation is depending on whether the scroll is up or down:
JS:
var $gears = $('.gear'),
$i = 0,
$scrollBefore = 0;
$(window).scroll(function () {
if($(this).scrollTop() > $scrollBefore){
$scrollBefore = $(this).scrollTop();
$gears.css("transform", "rotate(" + ($i+=4) + "deg)");
}else if($(this).scrollTop() < $scrollBefore){
$scrollBefore = $(this).scrollTop();
$gears.css("transform", "rotate(" + ($i-=4) + "deg)");
}
});
this JS Fiddle 2, makes them rotate in opposite directions, and each gear direction switches depending if the scrolling is up or down:
JS:
var $gearLeft = $('.left_pulley'),
$gearRight = $('.right_pulley'),
$i = 0,
$j = 0,
$scrollBefore = 0;
$(window).scroll(function() {
if ($(this).scrollTop() > $scrollBefore) {
$scrollBefore = $(this).scrollTop();
$gearLeft.css("transform", "rotate(" + ($i += 4) + "deg)");
$gearRight.css("transform", "rotate(" + ($j -= 4) + "deg)");
} else if ($(this).scrollTop() < $scrollBefore) {
$scrollBefore = $(this).scrollTop();
$gearLeft.css("transform", "rotate(" + ($i -= 4) + "deg)");
$gearRight.css("transform", "rotate(" + ($j += 4) + "deg)");
}
});

Thanks for all the help everyone!
Just want to post my finial code in case anyone else needs help in the future.
/* Scott Louzon 11/24/15
This code is used to rotate two images of a gears when user scrolls */
/*This function see's when user scrolls then calls rotate_right & rotate_left
accordingly */
var scroll_at = 0; //variable to keep track of
//scroll postion
$(window).scroll(function() {
if ($(this).scrollTop() > 0) //if scroll postion is not at
{ //top do this
if ($(this).scrollTop() > scroll_at) //if scroll postion is > than b4
{
rotate_down();
}
else if ($(this).scrollTop() < scroll_at) //if scroll postion is < than b4
{
rotate_up();
}
scroll_at = $(this).scrollTop(); //set varible to were scroll
//postion is at now
}
})
//Both these functions call css to rotate the image of a gear
var rotation = 0;
function rotate_down()
{
rotation+= 8;
$(".left_pulley").css("transform","rotate("+ rotation +"deg)");
$(".right_pulley").css("transform","rotate("+ (-1 * rotation) +"deg)");
}
function rotate_up()
{
rotation += 8;
$(".left_pulley").css("transform","rotate("+ (-1 * rotation)+"deg)");
$(".right_pulley").css("transform","rotate("+ rotation +"deg)");
}
.left_pulley
{
position: absolute;
margin: 0;
padding: 0;
/*Used for gear rotation */
transition: transform 1ms;
transform-origin:50% 50%;
top: 263px;
left: 87%;
height: 35px;
width: 35px;
}
.left_pulley img
{
width: 100%;
}
.right_pulley
{
position: absolute;
margin: 0;
padding: 0;
/* Used for gear rotation */
transition: transform 1ms;
transform-origin:50% 50%;
top: 263px;
left: 94.2%;
height: 35px;
width: 35px;
}
.right_pulley img
{
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left_pulley">
<img src="gear2.png" />
</div>
<div class="right_pulley">
<img src="gear2.png" />
</div>