Recently I had to develop one-pager, that had complicated animation in the header, that should progress forward/backward on page scroll. Because the page had to be very light, I decided to drop jQuery and TimelineMax and include only TweenLite and CSSPlugin. Here is the result:
See the Pen Page Header animation by Chrysto (@bassta) on CodePen.850
The script is very compact, easy to use and modify, cross-browser ( Actually DOMContentLoaded is supported IE9+ ).
Have fun forking and modifying it.
On this tutorial I will show you how to create a smooth scrolling for your website. We’ll be using TweenMax and the ScrollToPlugin.
[button url=”http://bassta.bg/demos/smooth-page-scroll/” style=”green” size=”large” type=”square” icon=”view” target=”_blank”] VIEW DEMO [/button] [button url=”http://bassta.bg/downloads/smooth-page-scroll.zip” style=”blue” size=”large” type=”square” icon=”download” target=”_blank”] DOWNLOAD FILES [/button]
Continue reading “Smooth page scrolling with TweenMax”
Once you’ve included the plugin you’re able to use the full power ot TweenMax – it is possible to tween CSS properties such as color, box-shadow, text-shadow, 2D and 3D transforms, background position and many more. GSAP use the same syntax as jQuery and takes care of browser specific code, such as vendor prefixes.