<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<figure>
<img src="https://images.unsplash.com/photo-1549787984-da680ef3f653?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
</figure>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
<script>
const elem = document.querySelector('figure')
const duration = window.innerHeight
let scrollTarget = 0
let scrollCurrent = 0
const ease = 0.15
const tl = new TimelineLite({ paused: true })
tl.fromTo(elem, 1, { alpha: 1, scale: 1, yPercent: 0 }, { alpha: 0, scale: 0.5, yPercent: -50 })
window.addEventListener('scroll', () => {
scrollTarget = window.scrollY
})
function normalize(val, max, min) {
return (val - min) / (max - min)
}
