JD9

Try this app if you're on a Mac (Older version, free to use I guess): SiteSucker 2.3.6 It let's you download entire websites, you can choose your base url and dig / scrape / crawl / download from there (e.g. http://greensock.com/docs/#/HTML5/ in your case). You can also "localize" file paths. If that doesn't work, and you know a bit of Python, a whole world of open source web crawler tools exist. Have a look at http://scrapy.org/ It's like GoogleBot, only "a tiny little bit" less advanced. PS: Since these tools exist, I dropped you the urls. But I recommend that you first ask Jack / Carl for permission to use such scraper-tools to download / localize the GreenSock docs for your personal use. PS2: you can also run MongoDB, a document data store / no-SQL engine. It uses BSON (binary JSON) to store data (e.g. some data you first scraped and then mapped). You can then re-format your content of interest to another format (your own, local, pages that get fed data from MongoDB). -Jos

Exploding snow! Very very cool Blake! It's also a really nice touch how the "snow burns" attach to Jack. Or is it Carl? Jos

I wanted to be helpful by trying to make a downloadable localized version of the documentation. For OSx an app called "SiteSucker.app" exists (like curl / wget, but with a bunch of added file localization options). It works, kind of, but I found out the GreenSock docs DOM animations require one or more Green Membership Plugins -Jos

I think I'm getting the hang of it now! Revised code: $('.gsfx-bgsweep-right').on( gsFx_BgSweepRight( $('.gsfx-bgsweep-right'), { backgroundColor: "rgb(103, 65, 114)"} ) ); function gsFx_BgSweepRight(element, config) { config = config || {}; var time = config.time != null ? config.time : 0.3; var backgroundColor = config.backgroundColor != null ? config.backgroundColor : "#f00"; // if needed, inject an extra stylesheet at runtime if ( typeof gsFx_sheet == "undefined" ) { gsFx_sheet = (function() { var style = document.createElement("style"); style.appendChild(document.createTextNode("")); // webKit hack document.head.appendChild(style); return style.sheet; })(); } // inject pseudo element to the DOM at runtime gsFx_sheet.insertRule(element.selector + ":after { content: ''; }", 0); var pseudo = element.selector + ":after"; // read the DOM for the pseudo element var rule = CSSRulePlugin.getRule(pseudo); // inspect all properties for debugging purposes // var ruleObject = ''; // for (property in rule) { // ruleObject += property + ':' + rule[property] + '; '; // }; // console.log(ruleObject); // add properties to the rule object TweenMax.set(rule, { cssRule: { scaleX: 0, scaleY: 1, position: "absolute", zIndex: -1, backgroundColor: backgroundColor, top: 0, left: 0, right: 0, bottom: 0, transformOrigin: "0% 50%" }}) var animation = TweenMax.to(CSSRulePlugin.getRule(pseudo), time, { cssRule: { scaleX: 1, scaleY: 1 }, ease: Sine.easeOut, paused: true } ); return { mouseenter: function() { animation.play(); }, mouseleave: function() { animation.reverse(); } }; }

Blake, I've tested your "Christmas Snowy Pen" on an iMac5K 4GHz i7/32GB/4GB M295X GPU: 150.000 snowflakes fall down nicely as well! Although at a 500.000 snowflakes blizzard you can't see the mountains anymore and Firefox starts to dislike being responsive at screen resize Cooooooool Pen! Jos

Guys, another question regarding my gsFx.js library: if, on a given web page using gsFx.js, multiple background effects were to be applied, where each function (to be copy pasted as-is into a "main.js" that's the whole idea) would contain the same function for "stylesheet injection" like so... // inject an extra stylesheet at runtime using an IIFE passed back into the 'sheet' object var sheet = (function() { var style = document.createElement("style"); style.appendChild(document.createTextNode("")); // webKit hack document.head.appendChild(style); return style.sheet; })(); ... then I'm guessing a whole bunch of style objects are being added to the DOM. (Not sure if that's a big issue anyway when only e.g. 5 of these effects are to applied, but anyway it's not optimal). => How about running an IIFE in gsFx.js creating the sheet object once by default? It's then globally scoped so I can skip creating new style elements for every individual effect function. EDIT #1: renaming the IIFE to "gsFx_sheet()" is probably even better for avoiding naming conflicts. EDIT #2: if I would declare the gsFx_sheet() IIFE once in gsFx.js, including that (giant?) lib would become obligatory since the effect functions are then not fully self-contained. I could also, in each function, check if the "gsFx_sheet" object exists, and if not, create it by assigning the function to the "gsFx_sheet" object by omitting the "var" declaration, forcing it to become globally scoped. Hmm.. need to think about what's most practical... -Jos

Cool, I made it to the video series already! Yay! Another thought: I could have omitted declaring (a bunch of) arguments in sheet.insertRule() , and move those arguments to TweenMax.set(rule, {cssRule:{ } }) I'm guessing performance-wise that would save a bit of under-the-hood translations? -Jos

Hi Jonathan, since Carl wrote this... .. I doubt it to be a hidden built-in GSAP feature I've scanned the GSAP src-files for "skale", but couldn't find a match. So the mystery remains! Anyway, Jonathan, it's good that you've entered this thread. Because the whole point of this post of mine, is that I've been reading a specific thread (http://greensock.com/forums/topic/12688-difficulty-converting-a-css3-transition-into-a-gsap-controlled-transition/page-2) where the general advise - inspired by yourself actually! - was to "steer away from" pseudo element manipulation. Yet for my (under development) "gsFx.js" Effects Snippet Library, (preview: http://monsterbrands.nl/projecten/gsFx/ ), specifically targeted at HTML / CSS / JavaScript / GSAP beginners, I explicitly needed a :before or :after pseudo element, yet without any relevant ("difficult") CSS. I want beginning users to be able to use gsFx.js as "add water" effects, like "hover.css" but running on GSAP. And therefore I needed to "inject" that CSS, not present in HTML or static CSS, for CSSRulePlugin to read (it has the .getRule() method, but no setRule() for pseudo elements). Pretty hard, being (somewhat of) a JS beginner myself! Thanks for participating by the way! Kind regards, Jos

Hi Jonathan, That's my point exactly, why is and was my CodePen working on Firefox, running Gecko, when exactly there I made my typo "skaleX(1)"? I deliberately left the typo on my CodePen, I added a comment above it. Have a look at it again if you like! Cheers, Jos

Huh? That's a typo I corrected hours ago! Yet if my webhost was caching that version, how come your browser's dev tools are showing it ánd it's working? Edit: and even more strange, my CodePen version is still showing 1 typo (I'll keep it that way for debugging), yet it was already running correctly on Firefox (without the -webkit-transform prefix): cssRule: { transform: "skaleX(1)", "-webkit-transform": "scaleX(1)" } //-------------------- ^ ----------------------------- ^ ---------

@Carl, cool huh! PS 1: I still don't know why my version (http://codepen.io/josdelien/pen/MydOpJ) isn't functioning on CodePen, but is indeed functioning on my develop server (http://monsterbrands.nl/projecten/gsFx/). And I mean it was - and is - already functioning without your additional set()! All OSx browsers I tested (FF, FF Dev Edition, Chrome, Safari) are working. And I've just cross-browser tested it on Windows FireFox (working as well), Windows Chrome (working as well), Windows Edge (working as well), Windows IE11 (working as well). PS 2: with your addition ... TweenMax.set(rule, {cssRule:{scaleX:0}}) ... all my OSx browsers are functioning as well on your CodePen version (http://codepen.io/GreenSock/pen/ONYzLN) So I'm very interested in knowing why it was necessary to do that set() , as well! -Jos

Hi, for my "gsFx.js" project (GSAP Effects Library), containing "plug-n-play / add water"-effects for GSAP beginners, I'm currently working on background transition/animation effects. I think I ran into a CSSRulePlugin bug, but please correct me if I'm wrong (I'm actually hoping I'm wrong so I can continue with adding effects to my library straight away ). Please look at my Codepen example, here: http://codepen.io/josdelien/pen/MydOpJ I've created 2 hyperlinks, mimicking the same effect. 1) the first I animated using CSS, working fine on modern browsers; 2) the second using GSAP is only working on OSx Firefox, not on OSx Chrome or OSx Safari (I haven't tested any Microsoft browsers yet). Note: For the :before / :after pseudo CSS, I've tried using inline CSS, external CSS (OSx Chrome then throws an error in the console). But I prefer to setting the pseudo css properties in gsFx.js, because that way the only user-configurable variable calling this effect to add is the new backgroundColor of the pseudo) What's the matter? -Jos EDIT1: hmm, I can try adding vendor prefixes... Just a minute, le tme try... EDIT2: I was partially right .... On my dev server OSx Chrome ánd OSx Safari is OK now with the vendor-prefix included, but on the Codepen example it's still not working in Chrome nor Safari. These are my header includes locally, which are working now for me. Is Codepen running other GSAP versions? <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="js/greensock-js-1.18.4/src/minified/TweenMax.min.js"></script> <script src="js/greensock-js-1.18.4/src/minified/TimelineMax.min.js"></script> <script src="js/greensock-js-1.18.4/src/minified/plugins/CSSPlugin.min.js"></script> <script src="js/greensock-js-1.18.4/src/minified/plugins/CSSRulePlugin.min.js"></script> <script src="js/gsfx.js"></script> <script src="js/main.js"></script> (PS, partially off-topic, @Jack / @Carl, would this be an idea for implementing a .setRule() method onto CSSRulePlugin? var sheet = (function(el) { var style = document.createElement("style"); style.appendChild(document.createTextNode("")); // webKit hack document.head.appendChild(style); return style.sheet; })(); sheet.insertRule(el { background: rgb(103, 65, 114); content: ''; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; transform: scaleX(0); transform-origin: 0% 50%; }", 0);

@Sanjshah, animating in GSAP is really great fun and quite easy to do. You'll get the hang of it in no time! I've only begun using GSAP since last week, and your question was my first opportunity to answer! @Carl, cool that document.querySelectorAll() steps in, in case jQuery wasn't included! Didn't know that myself, that's actually a a very useful GSAP feature for my library! -Jos

Hi sanjshah, 1) you're referring to ".logo", which is a jQuery style selector. You'll need to declare a jQuery library to be able to use it's selector engine. 2) you need to add a little bit of CSS code, since you're trying to move .logo towards the right. position: relative; does that for you (for example). I've completed your tutorial code to get you started (really simple example, exactly like the one you're trying out in your tutorial). Copy paste this to your computer file (you've called it "TweenMaxTest.html") and you're good to go!" Happy Tweening! Jos <!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script> </head> <body> <div class="logo" style="background-color: red; height: 50px; width: 50px; position: relative;"></div> <script> TweenMax.to(".logo", 12, {left:600}); </script> </body> </html>

Waaaaahhhh! Blake! Cool! Some thoughts: 1) Portability Yesterday I already created a bunch of hover effects mimicking hover.css, in this format: function gsap_Anim_Skew(element, config) { config = config || {}; var time = config.time != null ? config.time : 0.3; var animation = TweenLite.to(element, time, { skewX: -8, ease: Sine.easeOut, paused: true } ); return { mouseenter: function() { animation.play(); }, mouseleave: function() { animation.reverse(); } }; } $('.gsap-anim-skew').on( gsap_Anim_Skew( $('.gsap-anim-skew') ) ); Yet if we write it like so ... var effects = {}; $.extend(effects, { skew: function() { var effect = { enter: { skewX: -8, ease: "Sine.easeOut" }, leave: { skewX: 0, ease: "Sine.easeOut" }, duration: 0.3, animation: "skew" }; return gsFxAnimation(effect); } }); ... that's better from a library point-of-view, but less portable for copy-pasting single "Add Water"-effects into website projects. If we would put in 1.000 effects into 1 big effects library, yet only 2 effects are used in a given website project, that's a whole lot of redundant code. So I'd like the effects functions to be "self-contained", copy-paste-able. 2) Method calls, html classes I really like your .gsFx() method call, in stead of jQuery's .on() though, and I also like setting class names and using the ticker. Structure proposal: So how would we structure things for usage this way? How about this: part 1) one obligatory library file for convenient-use-functionality { .gsFx() method calls, class listeners, and configuration options } part 2) another library file, to include optionally, with a giant effects object part 3) another library file, same as "part 2", in the form of self-contained effect functions, for "plug-n-play" use within website projects. -Jos