Smooth Scrolling With TweenMax
How do I make an smooth scrolling with tweenmax?
What is a smooth scrolling with tweenmax? How do you make a smooth scrolling with tweenmax? This script and codes were developed by 042 on 09 January 2023, Monday.
Smooth Scrolling With TweenMax - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smooth Scrolling With TweenMax</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <div id="artifact"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Smooth Scrolling With TweenMax - Script Codes CSS Codes
#wrapper{ height: 2000px;
}
#artifact{ height: 200px; width: 200px; background: blue;
}
Smooth Scrolling With TweenMax - Script Codes JS Codes
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();
var SmoothScroll = function(){ this.init();
};
SmoothScroll.prototype = { dirOfChange: 0, scrollTop: 0, init: function(){ this.bindEvents(); this.render(); }, bindEvents: function(){ var self = this; $('body').on('mousewheel', function(e){ e.preventDefault(); var change = e.deltaY * 2; self.scrollTop -= change; if(change > 0){ self.dirOfChange = -1; }else{ self.dirOfChange = 1; } }); }, render: function(){ var self = this; window.requestAnimFrame(function(){ self.render(); }); if (this.dirOfChange < 0) { if (this.scrollTop > -1) { this.scrollTop = 0; return; } } else { if (this.scrollTop < 1) { this.scrollTop = 0; return; } } TweenMax.set($('body'), { scrollTop: "+=" + this.scrollTop }); this.scrollTop *= 0.9; }
};
var ss = new SmoothScroll();
![Smooth Scrolling With TweenMax - Script Codes](http://shots.codepen.io/042/pen/ikBxE-512.jpg)
Developer | 042 |
Username | 042 |
Uploaded | January 09, 2023 |
Rating | 3 |
Size | 2,126 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Custom Kakao Share Button | 2,000 Kb |
Custom HTML Nested List Counters | 2,534 Kb |
JCycle2 with HammerJS | 15,418 Kb |
Vertical Sprite with Greensock TweenMax | 1,889 Kb |
Fastest website generator, ever. | 55,238 Kb |
A Pen by 042 | 2,956 Kb |
The Singapore Flag using Pure CSS | 2,807 Kb |
SR_02 | 3,668 Kb |
Smooth Scrolling With TweenMax | 2,126 Kb |
Animating characters with jQuery | 2,776 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
Sassy Buttons | Elyseholladay | 2,299 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Double box-shadow | Daubac402 | 1,436 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
3D Text in Sass | Bookcasey | 2,766 Kb |
CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
Simple, flat contact form | Zeaklous | 2,719 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!