WZjzdX

index.html

<div class="indicator">
  <div class="line"></div>
</div>

script.babel

var springSystem = new rebound.SpringSystem();
var spring = springSystem.createSpring(2000, 40);

TweenMax.set('.line', {y: '50%', transformOrigin: '0 0'})

spring.addListener({
  onSpringUpdate: function(spring) {
    var val = spring.getCurrentValue();
    //val = rebound.MathUtil.mapValueInRange(val, 0, 1, 1, 0.9);
    val = normalizeInertia(val, window.scrollY);
    render(val);
  }
});


window.addEventListener('scroll', function(e) {
  spring.setEndValue(window.scrollY);
});


function normalizeInertia (val, target) {
  return val - target;
}

function render (val) {
  TweenMax.set('.line', {scaleY: val / 200});
  engine.world.gravity['y'] = val / -3 +1;
}






// Matter.js module aliases
var Engine = Matter.Engine,
    World = Matter.World,
    Body = Matter.Body,
    Bodies = Matter.Bodies,
    Common = Matter.Common,
    Constraint = Matter.Constraint,
    Composites = Matter.Composites,
    MouseConstraint = Matter.MouseConstraint;

// create a Matter.js engine
var engine = Engine.create(document.body, {
  render: {
    options: {
      //wireframes: true,
      //showAngleIndicator: true
    }
  }
});

//add a mouse-controlled constraint
var mouseConstraint = MouseConstraint.create(engine);
World.add(engine.world, mouseConstraint);

// create a load of circle bodies
var stack = Composites.stack(250, 5, 3, 20, 0, 0, function(x, y, column, row) {
  return Bodies.rectangle(x, y, Common.random(25, 75), Common.random(25, 75), {
    //friction: .01,
    //restitution: .1,
    //density: 5.5,
    frictionAir: 0.001
  });
});

// add boundaries
var offset = 5;
World.add(engine.world, [
  Bodies.rectangle(400, -offset, 800 + 2 * offset, 50, { isStatic: true }),
  Bodies.rectangle(400, 600 + offset, 800 + 2 * offset, 50, { isStatic: true }),
  Bodies.rectangle(800 + offset, 300, 50, 600 + 2 * offset, { isStatic: true }),
  Bodies.rectangle(-offset, 300, 50, 600 + 2 * offset, { isStatic: true })
]);

// create function to update output values & manipulate gravity
function gravOutputUpdate(id, axis, val) {
  engine.world.gravity[axis] = val;
}

// add all of the bodies to the world
World.add(engine.world, stack);

// run the engine
Engine.run(engine);

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/rebound.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://github.com/liabru/matter-js/releases/download/0.8.0-alpha/matter-0.8.0.js"></script>

style.scss

body {
  height: 200vh;
  background: black;
}

canvas {
  //position: fixed;
  top: 0;
  left: 0;
}

.indicator {
  position: fixed;
  display: flex;
  width: 20rem;
  height: 20rem;
  background: white;
  top: 0;
  right: 0;
  .line {
    background: red;
    width: 100%;
    height: 100%;
  }
}

wzjzdx.markdown

WZjzdX

A Pen by Mikk on CodePen.

License.