Note: tweening is an abbreviation of inbetweening; creating frames between states in an animation sequence.
Tutorials
TweenLite/TweenMax
https://www.sitepoint.com/web-animation-tutorial-part-1/
TimelineLite/TimelineMax
https://www.sitepoint.com/greensock-beginners-part-2-gsaps-timeline/ (regular)
https://webdesign.tutsplus.com/tutorials/timelinemax-a-primer--cms-23064
https://ihatetomatoes.net/greensock-timelinelite-tutorial/
Local demos
gsap01.html
gsap02.html
gsap03.html
gsap04.html
gsap05.html
gsap06.html
gsap07.html
gsap08.html
gsap09.html
gsap10.html
gsap11.html
gsap12.html
gsap13.html
gsap14.html
gsap15.html
gsap16.html
gsap17.html
raphael10-only-animated-bar.html
tweenlite01.html
tweenlite02.html
tweenlite03.html
tweenlite04.html
tweenlite05.html
tweenlite06.html
tweenlite07.html
stretch01.html
stretch02.html
stretch03.html
stretch04.html
svg01.html
svg02.html
svg03.html
svg04.html
svg05.html
svg06.html
svg07.html
svg08.html
svg09.html
svg10.html
svg11.html
svg12.html
svg13.html
svg14.html
svg15.html
svg16.html
svg17.html
svg18.html
add01.html
add02.html
add03.html
add04.html
add05.html
bezier01.html
canvas01.html
css01.html
css02.html
css03.html
css04.html
css05.html
css06.html
css07.html
css3d01.html
css3d02.html
css3d03.html
drag01.html
drag02.html
timeline01.html
timeline02.html
timeline03.html
timeline04.html
timeline05.html
timeline06.html
timeline07.html
timeline08.html
timeline09.html
timeline10.html
timeline11.html
timeline12.html
timeline13.html
arc01.html
arc02.html
Not GSAP specific
Center things
https://www.w3.org/Style/Examples/007/center.en.html
center-viewport.html
Insert external SVG using AJAX
http://plnkr.co/edit/LneUEK?p=preview
http://plnkr.co/edit/IWTAV5jIxzSioTpj8UkJ?p=preview
Window size
https://usefulangle.com/post/190/javascript-window-width-height
https://ryanve.com/lab/dimensions/
var width = window.innerWidth
var height = window.innerHeight
https://stackoverflow.com/questions/40904696/how-to-get-browser-window-size-in-javascript
IE8 and earlier:
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
Hide scrollbars
https://stackoverflow.com/questions/4342686/disabling-browser-scrollbar/4342704
CSS
body
{
overflow: hidden;
}
javascript
document.body.style.overflow = "hidden";
https://stackoverflow.com/questions/242608/disable-browsers-vertical-and-horizontal-scrollbars
javascript:
function showScrollBars() {
document.documentElement.style.overflow = 'auto'; // firefox, chrome
document.body.scroll = "yes"; // ie only
}
function hideScrollBars() {
document.documentElement.style.overflow = 'hidden'; // firefox, chrome
document.body.scroll = "no"; // ie only
}
css:
overflow-y: hidden; // Hide vertical
overflow-x: hidden; // Hide horizontal
PNG/JPEG images within SVG
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image