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