Cor

Hi Carl, I am fine, thank you. As you now, Flash/AS3 was my thing, but that era is over. Graphics and animation is very simpel in Flash and the sky the limit. Now I have to get some skills in graphics in HTML5, CSS3, etc... The examples you and Blake gave me are a big help! var loc = "The Netherlands"; If ( Blake =@ loc || Carl =@ loc){ Cor buy beer; }else{ Thank you very much!!!; }

Thank you, Sir. The AJAX filtering is not my problem. I am looking for a tutorial or example to animate the cards like a rolodex

I would like to create a rolodex animation which a user can activate by typing a (part of a ) name or address. But I don't even know were to start! My basics are: Loading all persons from a mySQl database, create a <div>-card per person, and then I am lost... Any help is appreciated! TIA

Thanks Carl, your pen is the solution! I had it working within 30 minutes. I started to tune it so it gets clever.... And then I screwed something up badly without having a roll back. And restoring it, made everything worse!!! So Murphy's Law works!!! OK, I have it working again and responsive. But there is a little twitch. When the screen is resized to any smaller then 100%, the images give a sort of after effect. It is not because of force3D:true. Is this due to percentage resizing and images having a floating point size? I just created a pen so others can benefit when using Bootstrap: http://codepen.io/codo/pen/bBHGj Please feel free to correct this!! Next steps is a great array with pictures and they switch randmly in the filmstrip. Suggestions up front are welcome!

Hi Carl, CSS is really my worst field. I understand the challenge, in fact I was thinking of it a good part of the night. FYI, I use bootstrap as framework and now trying to get around some GSAP usage. So just out of bed, I was thinking of trying it in GSAP with scale on update or something like that? Now the www-world is getting more and more into responsive design and mobiles first, I think I spot a GSAP-challege... Maybe it is a good idea to extend GSAP to a full (responsive) framework... That would be shockingly green! Thanks for your support and I hope you guys continu the challenge!!

Yes, I have seen that, and will try to implement it. Looking forward to your solution... Thanks again!!

Thanks Jonathan! I guess defining the width and height is probably not a good approch, because I want to use this in a responsive website. What would be the proper way to do this?

I have a problem getting image tweened in the correct position. The filmstrip width is 1920 px. When images are positioned staticly the first left is 20 px. Every picture width is 200 px. The space between 2 images is 40 px. But when tweening images into place, the position is not correct. Why? Or what am I doing wrong?

Thanks Chrysto! Yes, ofcourse I can color the first word with a tween, but I was trying to set color in a span and see the outcome. And I guess this means all my primairy set (css-)settings will be overridden bij SplitText.

I am trying to color some text within SplitText, but it doesn't get red (rood). Is it SplitText or just me again.

Carl, I do have it working, but i am just extending it to get more "skills" with GSAP. I can create a codepen, but can I use PHP in there? Because all my data is loaded from reading directories and/or a database. I even load all greensock js in with 1 PHP statement and accept a few Kb extra. In case of no-PHP I have to consider rebuilding it to HTML, which is really a lot of double work. Thanks again!!!

THANKS Carl, Yes I know of the params, it was just an example of creating instances. And you point me exactly to my spot. Very-old-Flash-school... I found this one too: http://www.snorkl.tv/2011/06/as3-oop-case-study-build-a-ferris-wheel/#more-1035 Old man with old habbets... So you are going to get a lot of "trouble" with me. Whoahahahaha.

Thanks Carl! @a single tween or timeline of tweens. In Flash I normally would instantiate a new TweenMax. But this is not possible in GSAP. So: var tw = new TweenLite(); //or TweenMax() tw.set(".foto", {xPercent:-50, yPercent:-50, opacity:0}); //handles all vendor prefixes of translateX(-50%) translateY(-50%) tw.staggerTo(".foto", .5, { opacity:1 }, 1); return tw; does not work. Now I would conclude I always have to use a Timeline instead of a Tween? But surely I am wrong?

Hi Elior, Sorry, maybe I did not express myself correctly (native Dutch). I agree, GSAP is brilliant, but I am a novice at it. It is just that I switched from Flash (using greensock in there) to HTML5/PHP/CSS/jQuery and found Bootstrap an easy start. And now I am looking for another way to set up a responsive site structure using (possibly only) GSAP. Best regards Cor

I load in like 10 photo's (img tag with class="photo". They to appear 1 after the other opacity from 0 to 1. Works OK. I want my timeline to yoyo infinitly. But at the end of the first run it stops. What am I doing wrong: function init(){ var mainTL = new TimelineMax({repeat:-1, yoyo:true}); mainTL.add( intro() ); } function intro(){ TweenMax.set(".photo", {xPercent:-50, yPercent:-50, opacity:0}); TweenMax.staggerTo(".photo", .5, { opacity:1 }, 1); } init(); I know I could this, but then the sequence runs in the same order instead of reversed: TweenMax.staggerTo(".foto", .5, { opacity:1}, 1, intro);

Hi, I just made my first GSAP animation and by coincidence, its what you ask. I would create a pen for you, but I also use PHP to read in the images and also all greensock js files. Here is my code, if you have any questions, feel free to ask: <?php session_start(); $startFolder = "NAME OF YOUR IMAGE FOLDER HERE"; $array_items = array(); function directoryToArray($directory, $recursive) { global $array_items, $startFolder; if ($handle = opendir($directory)) { while (false !== ($file = readdir($handle))) { if ($file != "." && $file != "..") { if (is_dir($directory. "/" . $file)) { $current = preg_replace("/\/\//si", "/", $file); $array_items[$current] = array(); if($recursive) { directoryToArray($directory. "/" . $file, $recursive); } } else { $file = $directory . "/" . $file; $current = preg_replace("/\/\//si", "/", $directory); $current = str_ireplace($startFolder."/", "", $current); $array_items[$current][] = preg_replace("/\/\//si", "/", $file); } } } closedir($handle); } //echo '<pre>',print_r($array_items), '</pre>'; return $array_items; } $output = ''; //$_SESSION[$startFolder] = directoryToArray($startFolder, true); /** All images of every subfolder foreach($_SESSION[$startFolder] as $subdir){ foreach($subdir as $foto){ $output .= '<img class="foto" src="'.$foto.'" />'; } } */ $_SESSION[$startFolder] = directoryToArray($startFolder,false); foreach($_SESSION[$startFolder] as $foto){ $output .= '<img class="foto" src="'.$foto.'" />'; } ?> <!doctype html> <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]--> <!--[if IE 7]> <html class="ie7 oldie"> <![endif]--> <!--[if IE 8]> <html class="ie8 oldie"> <![endif]--> <!--[if gt IE 8]><!--> <html class=""> <!--<![endif]--> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CODOBYTE</title> <link href="_css/boilerplate.css" rel="stylesheet" type="text/css"> <link href="_css/layout.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" type="text/css" href="_css/index.css"> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="_js/respond.min.js"></script> <style> .foto { position: absolute; left: 50%; top: 50%; } </style> </head> <body> <div class="gridContainer clearfix"> <div id="content"><?php echo $output; ?></div> </div> <?php //load all greensock.js $greensock = 'greensock'; $array_items = array(); $_SESSION[$greensock] = directoryToArray('_js/'.$greensock, true); foreach($_SESSION[$greensock] as $subdir){ foreach($subdir as $js){ echo '<script src="'.$js.'"></script>'; } } ?> <script> function init(){ var mainTL = new TimelineMax(); mainTL.add( intro() ); } function intro(){ TweenMax.set(".foto", {xPercent:-50, yPercent:-50, opacity:0});//handles all vendor prefixes of translateX(-50%) translateY(-50%) TweenMax.staggerTo(".foto", .5, { opacity:1 }, 1); } init(); </script> </body> </html>

Hi Elior, Not sure I understand correctly. What should then happen to the blue box? On top or behind the resized red box? Any way, I don't think it can be done with relative, because relative means it depends on the other object. Setting it to absolute and adjust the top may works: http://codepen.io/codo/pen/wKebj Until now I was using Bootstrap as the main framework, but I want to use GSAP instead. My guess is using both will become a hassle with bad ending. I am new as GSAP and in for any suggestion/tutorial/forum/blog how to set up a descent responsive site with GSAP. Best regards Cor

Of course I don't expect you to do all kinds of silly problems, other then GreenSock related. Be sure to keep GreenSock bug free, because I don't want problems with that too... I tried all possible other fora, but no luck there. Thanks you for reacting!

You are right, it is not related to the GreenSock tool! But I thought, here live all the smart guys, so maybe someone knows this of the top of his head. Is it forbidden/not-done asking non-GreenSock-related-Flash questions in this forum If so, I am sorry, and it will not happen again.

Hi List, First time in, just became Shockingly Green. I have this issue: When the browser get resize, and I want my swf to resize with it, the text in the component gets distorded. http://www.codobyte.com/problem/problemDatagrid.jpg This is just a screenshot! How can I fix this Regards Cor

Its all there.. I only looked the Dutch-way... Thanks again!!!

Yes, I understand what I was doing, but I don't know the proper way... yet. I am trying to figure out how to get to use LoaderMax for this in the most beneficial way. And by trying to implement it in the way I use to load/build my pages/site, is wrong. I am looking for some more tutorials or examples that would help me. Is there any available other then what I found on greensock.com? Most of all: Thank you for your answer!

I now notice that when I run the app in Flash - Test Movie, it fails to load at some given moment... But when I run the swf seperatly, it keeps working as expected...

Here is the problem source: http://www.codobyte.com/!problem/LoaderMaxProblem.zip (REMOVED) Click on the little menu several times and notice it doesn't show the images after it has loaded 24 images. I know the whole concept looks stupid, because it cal all be done with LoaderMax and XML in a much better way, but this is my first try with LoaderMax. So any other comment for me to learn a better approach is VERY welcome too. Kind regards Cor

I have several buttons which present albums with photos. When I click an album button, several images get loaded. Here is the callback function of the button: private function loadImages():void { if (conThumbs) { container.removeChild(conThumbs); } conThumbs = new Sprite(); conMain.addChild(conThumbs); //create a LoaderMax named "mainQueue" and set up onProgress, onComplete and onError listeners var ldrQueue:LoaderMax = new LoaderMax( { name:"childQueue", maxConnections:1, onChildComplete:completeHandler } ); var w:uint = 75; var h:uint = 48; for (var i:int = 0; i < aURLs.length; i++) { ldrQueue.append( new ImageLoader(aURLs[i], {container:conThumbs, x:offSetX+(i % 5) * w, y:offSetY+int(i / 5) * h, width:w, height:h}) ); } ldrQueue.load(); }//end loadImages Every click on another button loads the images correctly up to 24 loaders and after that it does trace it loaded the image but it doesn't appear on screen anymore?