GSAP

GSAP
Login

GSAP

https://greensock.com/

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/

https://zellwk.com/blog/gsap/

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

svg14.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