<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> <!------ Include the above in your HEAD tag ----------> <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) } function render() { scrollCurrent += (scrollTarget - scrollCurrent) * ease const progress = normalize(scrollCurrent, duration, 0) tl.progress(progress) requestAnimationFrame(render) } requestAnimationFrame(render) </script>

html, body{ height: 100%; } body{ height: 300vh; } figure{ position: fixed; top: 15%; left: 10%; right: 10%; margin: 0; padding: 0; } img{ display: block; width: 100%; height: auto; }