scrollr.js animation happens on element only with position fixed

Question

Hey guys i am new to Jquery and i was trying integrating the scrollr.js plugin in my website and came across the a difficulty , i have the following HTML :

<div  data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);" class="block"></div>

and the following CSS :

.block {
    height: 200px;
    width: 200px;
    position: relative;
}

Fiddle here.

now with the above CSS , the animations don;t work , scrollr.js does't work , but when i apply the following CSS :

.block {
    height: 200px;
    width: 200px;
    position: fixed;
    top:20px;
}

The animations and everything works fine .

fiddle here.

i don't always want the position on my element to be fixed . how do i get the animations to work, without taking out the element from the normal flow of the document ??

I saw this demo on scrollr.js .

But still can't get why my example does't work. , If somebody could explain why my example is not working . it would be of great help .

Thanks .

Alexander.

Answer 1

Your first animation does work. You probably don't see it because it starts animating as soon as you start scrolling and when you scroll to the image, animation is already done. Try making your screen height bigger, or remove some text at the beginning.

If you want animation to start when the item actually appears on the screen, take a look at documentation.

Try to change data-0 to data-bottom-top and data-500 to data-center.