How can an animation be made to correspond with page scroll position, so that when the user scrolls past it the animation goes to position A, and when the user's page scroll position is over it, it goes to position B?

Here is a mock-up of what I would like to make:

(The pivot point of the 3 pages is represented by the blue dot below them.)

I have found various examples of animations that are triggered once by page scrolling (such as AOS or ScrollTrigger), or can be re-triggered multiple times, but I haven't found any examples where the animation progress is connected to the page scroll position.

Maybe it can be done by modifying some existing example, but if not I think I will need to e up with something custom using the CSS animation property and connect it to the page scroll position somehow.

Any ideas how this can be achieved? Thanks.

How can an animation be made to correspond with page scroll position, so that when the user scrolls past it the animation goes to position A, and when the user's page scroll position is over it, it goes to position B?

Here is a mock-up of what I would like to make:

(The pivot point of the 3 pages is represented by the blue dot below them.)

I have found various examples of animations that are triggered once by page scrolling (such as AOS or ScrollTrigger), or can be re-triggered multiple times, but I haven't found any examples where the animation progress is connected to the page scroll position.

Maybe it can be done by modifying some existing example, but if not I think I will need to e up with something custom using the CSS animation property and connect it to the page scroll position somehow.

Any ideas how this can be achieved? Thanks.

• javascript
• css
• scroll
• css-animations

• I think you'll need javascript to trigger the animations – Daniel Vafidis Commented Jan 22, 2019 at 9:37
• @DanielVafidis Yeah, I was guessing it wouldn't be possible with CSS alone. – Mentalist Commented Jan 22, 2019 at 9:39

1 Answer 1

It is pretty easy if you use jquery with CSS3 to achieve it. You can rotate the page and calculate the rotate value based on the scroll position.

I have made sample example below. Please see the Snippet below:

$(document).ready(function(){
	$(document).scroll(function(){
  	var scollHeight = $(document).height(); 
    var maxRotate = 30;
    var rotateVal =  5 + (($(document).scrollTop()* maxRotate) / scollHeight);
    
    $("#page1").css("transform", "rotate("+(-rotateVal)+"deg)");
    $("#page3").css("transform", "rotate("+(rotateVal)+"deg)");
  });
});

body{
  background-color: rgb(252,252,230);
}
.page-container{
  position: fixed;
}
.page{
  background-color:white;
  border:2px solid lightgray;
  width:85px;
  height:120px;
  position:absolute;
  top:20px;
  left:40px;
  transform-origin:bottom center -30px;
  transition-duration: 0.3s;
}

#page1{
  transform: rotate(-5deg);
}
#page3{
  transform: rotate(5deg);
}
.data-container{
  position: absolute;
  right:30px;
}
.data{
  background-image: url("https://i.sstatic/HwX2l.png");
  width:370px;
  height:283px;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
  <div class="page-container">
    <div class="page" id="page1"></div>
    <div class="page" id="page2"></div>
    <div class="page" id="page3"></div>
  </div>
  <div class="data-container">
    <div class="data" id="data1"></div>
    <div class="data" id="data2"></div>
    <div class="data" id="data3"></div>
  </div>
</div>

You can also test it here