JD9

May 23, 2016

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

May 19, 2016

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

May 19, 2016

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

May 18, 2016

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();	      
		}			   
	};	
}

May 18, 2016

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

May 18, 2016

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

May 18, 2016

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

May 17, 2016

Hi Jonathan, since Carl wrote this...

weird I see both versions working on Mac Chrome and I'm very confused especially because you are using this:
...
should be scaleX(1)

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

May 17, 2016

Hi Jonathan,

Hello JD9,

Firefox uses the Gecko rendering engine not webkit, so it just accepts transform.

The webkit prefix is only for browsers like Safari and Chrome.

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

May 17, 2016

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)" }

//--------------------  ^  -----------------------------  ^  ---------

May 17, 2016

@Carl, cool huh!

PS 1: I still don't know why my version

See the Pen MydOpJ by josdelien (@josdelien) on CodePen

) 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 (

See the Pen ONYzLN by GreenSock (@GreenSock) on CodePen

)

So I'm very interested in knowing why it was necessary to do that set() , as well!

-Jos

May 17, 2016

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:

See the Pen MydOpJ by josdelien (@josdelien) on CodePen

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);

See the Pen XdwYZX by jonathan (@jonathan) on CodePen

May 16, 2016

@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

May 16, 2016

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>

May 16, 2016

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

May 15, 2016

Blake, I understand the direction you're pointing me to. I'm diving into it straight away.
Thanks again!
-Jos

May 15, 2016

@Blake: You, Sir, are a true JavaScript sensei!

You have already gotten me this far (working code example, ref my initial code):

$(document).ready(function() {	

        // call this code from within a project's webpage custom JavaScript
	var target = $('.gsap-anim-grow');
	target.on( gsap_Anim_Grow(target) );
    
        // put this code into the Effects Snippets Library
	function gsap_Anim_Grow(element, config) {
		config = config || {};
		var time = config.time != null ? config.time : 0.3;
		var animation = TweenLite.to(element, time, { scale: 1.2, ease: Sine.easeOut, paused: true } );

		return {	    
			mouseenter: function() {      
				animation.play();
			},
			mouseleave: function() {
				animation.reverse();	      
			}       
		};
	}
});

Now, looking at my goal to create an absolute beginner's "Just-add-water GSAP Effects Snippet Library", I'm going to overthink for a bit what's the most convenient syntax for that purpose:

My thoughts:
- currently the function call is easily deployable to any HTML element (event on element A, animation on element A or somewhere else), yet limited to a .hover() event. I might want to pass an 'event' argument to the function. On the other hand, the more flexible/configurable the setup, the harder it becomes to deploy for beginners.

PS Blake, does your nickname come from the karate world?
If so: JavaScript wa rei ni hajimari, rei ni owaru. Osu! ;-)

-Jos

May 14, 2016

Hi everyone! Being inspired by standard effect galleries in css3 such as hover.css and animate.css

I reckoned "why not develop something like that for GSAP beginners?". My goal is to develop a basic set of "Add Water" effects on top of GSAP, to help absolute beginners discover the power of GSAP. So I've picked up the challenge to develop my own "GSAP Effect Snippets Library" and thinking about deploying it on GitHub or so, or in any case "sharing is caring"! ;-)

Yet I'm a GSAP and JS beginner myself ;-) And currently I'm faced with a simple Don't Repeat Yourself (DRY) JS/GSAP architecture question. Can you help me out?

Current state:
This is where I'm at right now, I've just started with three very simple effects. The code is working, yet with a very clumsy architecture, not suited for my goal at all.

$(document).ready(function() {	

	
	// IIFE: grow
(function grow() {
    $('.gsap-anim-grow').hover(enter, leave);

    function gsap_Anim_Grow(el) {        
        var tl = new TimelineLite();
        tl.to(el, 0.3, { scale: 1.2, ease: Sine.easeOut} )
        return tl;
    }

    function enter() {
          if( !this.animation ) {
              this.animation = gsap_Anim_Grow(this);
          } else {            
               this.animation.play();
          }
    }

    function leave() { this.animation.reverse(); }    
})();



// IIFE: shrink
    (function shrink() {
    $('.gsap-anim-shrink').hover(enter, leave);

    function gsap_Anim_Shrink(el) {        
        var tl = new TimelineLite();
        tl.to(el, 0.3, { scale: 0.8, ease: Sine.easeOut} )
        return tl;
    }

    function enter() {
          if( !this.animation ) {
              this.animation = gsap_Anim_Shrink(this);
          } else {            
               this.animation.play();
          }
    }

    function leave() { this.animation.reverse(); }    
})();

// IIFE: skew
    (function skew() {
    $('.gsap-anim-skew').hover(enter, leave);

    function gsap_Anim_Skew(el) {        
        var tl = new TimelineLite();
        tl.to(el, 0.2, { skewX: -8, ease: Sine.easeOut} )
        return tl;
    }

    function enter() {
          if( !this.animation ) {
              this.animation = gsap_Anim_Skew(this);
          } else {            
               this.animation.play();
          }
    }

    function leave() { this.animation.reverse();  }    
})();



});

I'm repeating myself over and over this way where the only thing changing is the animation itself. It would seem far more logical to me if I could put all animations in a JSON-style object, like so:

var animations = {
    gsap_Anim_Grow: function (el) {            
        var tl = new TimelineLite();
        tl.to(el, 0.3, { scale: 1.2, ease: Sine.easeOut} );
        return tl;
    },

    gsap_Anim_Shrink: function (el) {        
        var tl = new TimelineLite();
        tl.to(el, 0.3, { scale: 0.8, ease: Sine.easeOut} )
        return tl;
    }
}

Note: On the other hand... on some effects (e.g. a horizontalWobble) it's desirable that the mouseleave handle triggers no effect (desired effect: "only wobbling at mouseenter, nothing happening on mouseleave"), so in that case the "leave" function / parameter should do nothing. It seems as an improvement to include the enter / leave behavior within each animation function. But how do I accomplish that syntactically?

Also, I'd like to use ONE handlerInOut on the .hover() method, so that any given effect can be called from

a simple jQuery selector, like so:

// My preferred animation call
// Any jquery class selector, same as the animation function name
// right now, but can be any class in the DOM,
// And preferably just one handlerInOut for beginner convenience.

$('.gsap-anim-grow').hover(gsap_Anim_Grow);

How to re-write this JS structure into a proper DRY manner so that the complete animation library can be simply declared in the HTML?

Can you put me on the right track?
Thanks very much in advance,
-Jos

May 14, 2016

Fantastic examples Blake! Really inspiring!
Your pen (

See the Pen 7b033317eed404ce7ab42508f61da856?editors=0010 by osublake (@osublake) on CodePen

) is technically the coolest morphing animation I've seen! Call that a "simple" demo? It's fantastic!

-Jos

May 13, 2016

@erik, a couple of remarks/suggestions on TweenUI:

- easing options, start, duration by double clicking: Aaah! Now that you mention it, I remember accidentally noticing those options while figuring out your GUI at the beginning but somehow forgot how I got there and "mindmapping" that option as available on AniMachine (which I also reviewed briefly) instead of TweenUI: my bad!

- keyframes (#1): being familiar with Adobe After Effect's interface, I'd suggest adding a feature being able to click on a keyframe and from there viewing the exact same dialogue box as from doubleclicking the animation bar;

- keyframes (#2): option to add more than two keyframes of the same property on one timeline track. This way you can reduce the number of "timeline tracks" for more complex animations;

- keep separate "timeline tracks" per property (like you have now for "motion", "opacity", "scale", and "rotation") but make the properties panel

<div class="JM">...</div>

contextual to the property you're animating.

- add more properties.

PS: I didn't mean to ridicule TweenUI by any means in my short review (#entry61022)! It's actually the completest and most performant browser-based animation GUI I'm aware of, so big props to you! I'm happy to give you more suggestions if appreciated.

-Jos

May 13, 2016

Hi Jack, thanks for the reply.

- my path deforming proposal: only useful in a GUI context, never mind.

- development of GSAP IDE/GUI: as suggested, this could be a separate product from the API, so it wouldn't (necessarily) interfere with your GSAP API (product) strategy. I don't see how such an IDE could limit GSAP’s API appeal in the wider market, the GSAP API would still allow to be used in other IDEs/GUIs or code animation project. ( Google Search managed to survive quite okay after Chrome Browser initially deployed, right? )

I completely respect your considerations on not having the resources or UI design skillset. Of course those aspects could very well interfere with your API strategy.

Being new to the GreenSock forum I was simply unaware of any skillset or resource restrictions and I apologize for that!

-Jos

May 12, 2016

Thanks so much for the all the ideas and enthusiasm. I wish more people had this passion. I really enjoy soaking it all in, its just a lot to address at the moment.

You're welcome Carl and I understand your time constraints.

-Jos

May 12, 2016

PS3: if adding IDs to SVG anchors / coordinates isn't possible in the SVG spec, you could also read all initial coordinates from the SVG path, explode them into a temporary array / JSON object, add / remove anchors as needed in the array / object, change coordinate values per array / object element, update the initial SVG path, and then morph them! ;-)

-Jos

May 12, 2016

PS1: sorry for the tiny visual, you can click on it to zoom in though ;-)
PS2: I think this would require every anchor / coordinate in an SVG to have an ID, and I'm not sure if that's possible in current SVGs.
What do you guys think?

-Jos

May 12, 2016

My idea of "path deforming" in GSAP API / GSAP IDE:

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by JD9