Smooth Scrolling With TweenMax

Developer
042
Size
2,126 Kb
Views
14,168
  1. Smooth Scrolling With TweenMax Previews
  2. Smooth Scrolling With TweenMax HTML Codes
  3. Smooth Scrolling With TweenMax CSS Codes
  4. Smooth Scrolling With TweenMax JS Codes

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 Previews
IQ Test

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
Smooth Scrolling With TweenMax - Script Codes
Home Page Home
Developer 042
Username 042
Uploaded January 09, 2023
Rating 3
Size 2,126 Kb
Views 14,168
Do you need developer help for Smooth Scrolling With TweenMax?

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!

042 (042) Script Codes
Name
JCycle2 with HammerJS
Responsive Breakpoint Mixins
Fastest website generator, ever.
The Singapore Flag using Pure CSS
Scrolling through cards with stepper
Custom HTML Nested List Counters
JF_01
Colored Numbers for Ordered List
Animating characters with jQuery
A Pen by 042
Create amazing blog posts with AI!

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!