Randall
Randall's Achievements
40
Reputation
-
Briliant. Thank you. This is what I was looking for. And I'm always in favor of a wrapper method. I was previously approaching it from a non-class perspective and simply trying to see if 'something' was undefined or not. Also, I was making the assumption that once a class was detected that it is also immediately ready for use because it was immediately invoked.
-
What is the most reliable and efficient way to detect if EasePack JS file was already loaded elsewhere on the page and is available (in an effort to prevent loading it again)? [EDIT: also, detecting if the various plugins were loaded too would be helpful]
-
Scenario: An element was hidden with jQuery's hide() method and then later it is tweened in using fromTo (0 to 1) using autoAlpha or alpha. Nagging Issue: Since alpha tweening is so common along with jQuery hiding/showing various elements, it would be ideal for the tweening logic to 'catch' the fact that a given element is hidden in the fashion that jQuery hide() produces across all browsers, thus alleviating a line or two of code to show/hide before and after the tween. In addition, sometimes there are flickers/glitches with the start of a tween if the jQuery show() is called just prior to the tween that animates from alpha=0 to alpha>0 value. Is this possible to overcome with other tween parameter options or would this be a feature request? Incorporate auto-checking for hidden elements and adjust them to be 'shown' before tween starts and then adjust them back to 'hidden' at the end of the tween? Example: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jQuery hide with Tweening Alpha Example</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="TweenMax.min.js"></script> </head> <body> <div id="box" style="position:absolute; width:400px; height:300px; overflow:hidden; background-color:#666666;"></div> <script> $(document).ready(function(e) { $('#box').hide(); setTimeout(someDelayedTween, 1000); }); function someDelayedTween(){ // uncomment this line below to unhide prior to tween // $('#box').css('display', 'block'); // calling jQuery show() periodically causes flicker/glitches at start of tween //$('#box').show(); // try to tween fromTo with alpha TweenMax.fromTo($('#box'), 1, {css:{alpha:0}}, {css:{alpha:1}}); // try to tween fromTo with autoAlpha // TweenMax.fromTo($('#box'), 1, {css:{autoAlpha:0}}, {css:{autoAlpha:1}}); // would be nice if the tween itself handled the hidden part behind the scenes } </script> </body> </html>
-
Also, another integration would be placing your "need to load" asset file paths into a main array and then loop through that array and load that type of item. They could be images or other files like jQuery AJAX calls to web services, XML, JSON, etc. Then you simply iterate through that loading array of assets and simultaneously check the position of the current asset being loaded in which to drive a progress bar or increment some other visual element until the max length of the loading array is reached. It's not perfect but it does provide some sense of progress other than a looping animated GIF image. So if you have 47 images, 2 xml files and a 1 JSON AJAX web services request, you have 50 total 'assets' to load and each 'array index' that is being loaded is therefore equivalent to a factor of 2 on a progress bar from 0 to 100. Just remember to have a 'complete' or 'success' event fire off after loading each asset item in the array so that you can increment to the next asset to load and simultaneously update the progress bar. var assetsToLoadArray = [ 'image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', //.. and so on up to 47 images... 'setup.xml', 'configuration.xml', 'http://www.somedomain.com/api/getJSONData?id=1234' ]; var totalAssets = assetsToLoadArray.length; // 50 total assets var currentAsset = 0; // refers to the first index in the array to load var progressFactor = Math.round(100 / totalAssets); // equals 2 function someLoadLoopCode(){ // loop code to iterate and load each asset by extension/file type // do a string search on each asset to load and find it's file type // and perform the appropriate conditional 'if' below // if .jpg use the new Image(); and its onload callback event // if .xml use jQuery AJAX and its success callback event // if http:// use jQuery AJAX and its complete event // each 'if' above would result in calling loadNextAsset() // to keep the iteration through all of the assets in the array } // need a function that is called for the load finished callback events function loadNextAsset(){ currentAsset++; setProgress(); if(currentAsset == (totalAssets - 1)){// check to see if on last item // all items loaded // do final callback or other code once all assets loaded }else{ // load next item code someLoadLoopCode(); } } function setProgress(){ var progress = Math.round(currentAsset * progressFactor); if(progress > 100){ progress = 100; }else if(progress < 0){ progress = 0; } // code here to set the progress to its visual element or text, etc. }
-
There's a few tips/tricks here http://forums.greens...dant-functions/ - it's speaking with regards to navigation, but the same principles apply for 'tracking' what's been clicked and preventing additional clicks until stuff is finished tweening.
-
Also, an additional advanced technique is to simultaneously size/move the parent div (need CSS overflow:hidden) while moving the nested div (holding all the elements) on the x/y (left/top) axis. Doing this with a little clever x/y width/height math offset tricks will essentially achieve any masking for any NSEW (north south east or west) direction. A minimalist example follows below. I would presume diagonal masking could also be achieved by rotation of the parent and/or nested elements using some additional positional and sizing tricks. masking.zip <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Masking Example</title> <script src="TweenMax.min.js"></script> </head> <body> <div id="parent" style="position:absolute; width:500px; height:300px; overflow:hidden; background-color:#666;"> <div id="child" style="position:absolute; width:300px; height:150px; overflow:hidden; background-color:#CCC;"></div> </div> <script> function $(id){return document.getElementById(id);} // mask reveal from left to right (default simple) TweenMax.fromTo($('parent'), 2, {css:{width:0}}, {css:{width:400}}); // mask reveal from top to bottom (default simple) //TweenMax.fromTo($('parent'), 2, {css:{height:0}}, {css:{height:300}}); // mask reveal from right to left (more complex) - must tween child offset //TweenMax.fromTo($('parent'), 2, {css:{width:0, x:400}}, {css:{width:400, x:0}}); // TweenMax.fromTo($('child'), 2, {css:{x:-400}}, {css:{x:0}}); // mask reveal from bottom to top (more complex) - must tween child offset //TweenMax.fromTo($('parent'), 2, {css:{height:0, y:300}}, {css:{height:300, y:0}}); // TweenMax.fromTo($('child'), 2, {css:{y:-300}}, {css:{y:0}}); </script> </body> </html> I've actually been working on a JavaScript masking display object class that objectizes the parent and child offsets for simple directional masking. The complex animated masking on the other hand is far more daunting in HTML/CSS/JavaScript. I suspect a plugin type solution could be devised for simple two-tiered masking approaches (parent mask container and 1 child container holding all of the other elements), but doing multiple nested masking past the 2nd level makes my head hurt.
-
This should work: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Rotation Example</title> <script src="TweenMax.min.js"></script> </head> <body> <div id="box" style="position:absolute; width:400px; height:300px; overflow:hidden; background-color:#666666;"></div> <script> function $(id){return document.getElementById(id);} TweenMax.to($('box'), 3, {css:{rotation:360}}); </script> </body> </html>
-
Quick side note... visit http://tools.pingdom.com/fpt/ and test the load time and check out the results. It gives a score of zero for leveraging browser caching. Once you get this caching aspect addressed you'll likely see diminished issues on reload/refreshes. Also, putting all of your javascripts before the </body> tag will also ensure a bit of latency on init() is resolved, though that can have some adverse affects to the page depending on styles/html, etc. - it's easy to work around those oddities though. With .htaccess, if supported on your server, you can specify the various headers and module caching stuff for specific file types and other things that can help with this sort of issue. // .htaccess code for caching and gzipping // (typical setup but you should customize to your server) <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 month" ExpiresByType image/jpeg "access 1 month" ExpiresByType image/gif "access 1 month" ExpiresByType image/png "access 1 month" ExpiresByType text/css "access 2 days" ExpiresByType application/pdf "access 30 days" ExpiresByType text/x-javascript "access 2 days" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 3 days" </IfModule> <IfModule mod_headers.c> <FilesMatch "\.(js|css|xml|gz)$"> Header append Vary Accept-Encoding </FilesMatch> </IfModule>
-
Yeah, thanks, I've been using the free software Inkscape http://inkscape.org/ to experiment with creating SVG graphics. Being that .svg files are pure XML, they can be sent GZipped from the server and are extremely small in file size compared to PNG/JPG, while providing scalable crisp vector output and clean edges to shapes and text. With canvas and SVG, we are getting much closer to simulating Flash-like animations with shapes and images.
-
Simple HTML5 example that tweens embedded SVG graphics. tween_svg_example.zip <embed id="svgBoard" src="board.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <embed id="svgPeopleRight" src="people_right.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <embed id="svgPeopleLeft" src="people_left.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <embed id="svgText" src="text.svg" type="image/svg+xml" style="position:absolute; left:0px; top:0px; width:727px; height:501px;" /> <script> function $(id){ return document.getElementById(id); } TweenMax.from( $('svgBoard'), 2, { delay:1, css:{top:-300}, ease:Expo.easeInOut } ); TweenMax.from( $('svgPeopleRight'), 1, { delay:2, css:{autoAlpha:0} } ); TweenMax.from( $('svgPeopleLeft'), 2, { delay:3, css:{left:-350}, ease:Strong.easeOut } ); TweenMax.from( $('svgText'), 2, { delay:5, css:{autoAlpha:0} } ); </script>
-
Like we used to do with AS3, it works equally well in JavaScript. All you do is preload the images into an array of image objects (in sequential order) and then access those images in the array sequentially via a timer or update type of event handler. Even mouse move events can control the position of the array image that is shown thus allow for interesting control of the image sequence animations. You could also use jQuery and/or Greensock JS or regular old school JS to swap images out (or cycle through the images in any number of ways with CSS and HTML/JS) to essentially play the array of images in a simulated 'movieclip' or 'sequence'. The interval between "showing" the images equates to your frames per second, like a 100ms timer would equate to roughly 10fps. dynamic_image_sequence.zip One way I like to do this is preload all of the images and contain the visible image inside a <div> tag and then swap them with an interval timeout that fires off showing the next image in the array while hiding the currently shown image, thus giving the illusion of a pseudo-sequence/movieclip. It's old school, but very reliable and rather simple as shown in my minimalist example ZIP above.
-
Interesting, does concatenation affect the caching on any measurable level? I've noticed that according to http://tools.pingdom.com/fpt/ that a score is much lower when loading a lot of files with the same file type like CSS, JS, etc. and it suggest combining them, but with large frameworks, combining all of the JS and CSS is really not ideal at all and quite the hassle if done manually or even macro-manually.
-
After chewing on this discussion for a while, I've moved towards the idea of simply having the flexibility to include any additional specific plugins beyond the base GSAP, which effectively gives us 'nano-like' control of total file sizes by virtue of what we choose to include or not. In that respect, the main issue would likely be any code that potentially references missing plugins and how the GSAP will respond. And that code we write could/should check for the existence of any missing plugin dependencies before any animations are started. Example of a dependency where TweenLite and TimelineLite (with CSSPlugin) would be required for a particular GSAP animation routine. // conditionals would ideally be wrapped in // recursive logic for checks/tests/loading if( TweenLite == undefined || TimelineLite == undefined ){ // we'd better load the GSAP stuff since // it's not available on the page at this moment... // perhaps registering somewhere else that we're loading // GSAP so other scripts wait for it instead of trying to load it }else{ if( CSSPlugin == undefined ){ // logic for missing plugin (either load it or wait until // it's loaded if already queued in another loader... or // registered it somewhere else as currently being loaded // and then wait for it to be available, forcing other scripts // on the page to wait as well instead of loading it) }else{ // if we get this far, then all is well and we // can now animate without issues } } With the scenario of centrally hosting the GSAP pieces and parts somewhere, if more elements on a given page (think rich media banners) reference GSAP and its various plugins, it would be great to construct our code to check for the existence of any required plugins (missing or already loaded/available) to determine if anything should be loaded prior to animation. The goal is to prevent near-simultaneous loading of the same plugin per page, if possible, which brings up the idea that I have used where instituting a ‘registration of loading dependency method’ where other scripts can check/test against the base framework if any given plugin is ‘registered’ to be loaded, and if not, ‘register’ that a particular plugin is being loaded so that other scripts merely stand by and wait for it to be available. It's all a bit tricky because if the base framework isn't loaded yet, the scripts somewhere have to load GSAP somehow without loading it more than once and keeping track of all those requests from various entrance points becomes a nightmare when factoring in human error. Then again, maybe this is all just way too much work and over complicated if we don't really care if multiple requests to load pieces and parts of GSAP are happening all the time without care and without regard.
-
I believe that's possible by 'scrubbing' a Timeline forward and backward based on the vertical scroll of the page. The trick is to match up the offset of the vertical scroll to the total frames of the Timeline to get the increments for forward and backward.
-
Oh yeah, I see that now. Oh how I dislike the IE browser. I keep forgetting you have those internal checks going on along with the workarounds. Great tip on the set() method, thank you!
