Search the Community
Showing results for tags 'gsap'.
Found 1,086 results
-
Don't know where else to put this post (Learning materials forums maybe, if we had one?) But thank you guys! Just checked my email this morning and wanted to say a huge Kudos for listening to the feedback and making the seminar your doing in New York available online for us all. If you got no idea what I'm talking about, today Greensock email : Upcoming events Our very own Carl Schooff will be leading a free 2-hour seminar about GSAP in NYC on January 28. Due to popular demand, he'll also be doing a similar presentation online (for those who simply can't make it to NYC) February 12.
-
Hi everybody, First of all, gratz for the amazing work you've done Jack, Carl and all the community's member who help the development of GreenSock. (and sorry for my bad English). i use TweenMax for 4 years in my projects AS3 in Flash and now i try to convert me to HTML5 with GSAP. I want to be able to convert all the work ive done for these 4 years in HTML5 and so ive decided to work with the more complex animation. The matter with this animation is the number of element animated (i join it to the message). I don't intend to declare all the element one by one, in CSS, this will be a wasted time I think. So, ive searched on the web but I found nothing that I can use. I work with Adode Design Premium CS5, so i can't use CreateJS as plugin for Flash and I haven't Edge Animate. I tried Swiffy but It doesn't seems to work. I tried to do something like this in Flash: function createCSS () { for (var i:int=0; i<numChildren-1; i++) { var mc:MovieClip = getChildAt(i) as MovieClip; tabMC[i] = mc; trace ('#'+mc.name+'{'); trace ('position:absolute;'); trace ('x:'+mc.x+';'); trace ('y:'+mc.y+';'); trace ('}'); trace (''); } } wich display a "potential" CSS style-sheets of all the elements but if I want it works, i will have to export each element in SVG with Illustrator with the same name used by Flash, and that also seems to be a wasted time. Is there another solution you see to do this ? I hope Ive been clear, my english is so bad. Thank you in advance for whatever help you can give me. Notice that the animation size is very low (52ko) i want to keep this size as lower as possible, even in HTML5. ps: attached file contains the .fla ATRT_anim01.zip
-
Hey guys, I'm a complete noob when it comes to animating along bezier curves. (I've never needed to use it until today). http://cdpn.io/synLJ I've got 6 circles dropping down and swinging to the right and then the left. I'm happy with what I've got up until that point. However when I want it to sit back in the starting point. I can't quite get it to look okay. Anyone got any tips? Or know of tools that I could use to get the right values? Cheers guys!
-
Hey, I seem to have an issue with tween lite rotation. when applying rotation:180 to a div. The tween works once. after resetting the css of the div I apply rotation:180 it does nothing... It seems the transform matrix isn't cleared. This only happen only steps of 180, 360... anything else works fine. TweenLite.to($("#image1'), 5, {rotaion:180, parseTransform: true, clearProps: "transform" }); Thank's in advance
-
Hey guys, This is my first time posting on here, and I hope to post on here more often in the future. I've been an avid user of AS3 Greensock for a long time, and I've only recently begun to use Timeline. I'd like to start building some animated ads for the iPad. I know that most ad providers suggest to use Zepto.js for DOM manipulation, but I'd rather use GSAP as I'm more familiar with the construction and syntax of the tweens. I was wondering if anyone on here had produced iPad ads for publishers who normally recommend Zepto?
-
Hi all, First of all can I just say how amazing this engine is to use! I've only been using it half a day and I have to say it is really amazing. My boss introduced me to it as he uses greensock for actionscript, and seeing as I am no flash programmer, he asked me to talk a look at the javascript version and its amazing My question is probably more a javascript question rather than a question about the actual engine files.. I have 2 divs (but want to add more), the first one called firstSlide and the second one secondSlide and what I want to do is once the animations are complete on the first slide, I want to add a delay of 5 seconds and then transition out the first slide and then show the second. Could someone please point me in the right direct of how I could do this please? Thanks in advance!
-
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>
-
Having trouble getting the Greensock machine gun effect to work on my site. I took the code used from codepen... http://codepen.io/GreenSock/pen/AGzci Cant for the life of me figure out why this isn't working on my site... http://madina.co.uk/test/ Please could you shine some light on this? I need some kinda trouble shooting article Thanks Mark
-
Hello. Thanks for the priceless GSAP. However, not sure why stagger isn't honoured with this code: function getButtonsInAnimation(callback) { var i, spots, spot, tween = new TimelineLite({paused: true, onComplete: callback}); for(i in spots = shuffle(hotspots)) { spot = spots[i]; tween.add(TweenLite.fromTo(spot, 0.3, {scale:0, alpha:0, left:290, top:168}, {scale:1, alpha:1, left:parseInt(spot.css('left')), top:parseInt(spot.css('top')), ease:Expo.easeOut} ), undefined, 'start', 0.05); } return tween; } As you can see, I'm adding new TweenLite object with TimelineLite.add() method. But it executes added tweens in sequence, ignoring the stagger value. Also tried to pass stagger value to the TimelineLite constructor. Same result. As of position property of TimelineLite.add() method, I also tried values, without any luck: '+=0', 0, false. Is there something I misunderstand?
-
I'm another Flash guy getting into Javascript with GSAP. I'm making a photo gallery and can't seem to get GSAP tweens to read function parameters when I send them via PHP to my Javascript function. For example, I make a PHP call like this: $imageFile = glob("images/*.*"); echo '<img src="'.$imageFile[1].'" id="thumbPic" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />'; to my Javascript functions like this: function imageOver(object) { TweenMax.to(object, .5, {width:100, ease:Cubic.easeOut}); } function imageOut(object) { TweenMax.to(object, .5, {width:85, ease:Cubic.easeOut}); } When I manually call these functions with the "this" parameter from HTML, it works great. But when I write the same HTML via PHP, it doesn't tween. When I trace the "object" parameter I get the same "HTMLImageElement". I've tried calling the image ID directly by doing this: TweenMax.to("#thumbPic", .5, {width:85, ease:Cubic.easeOut}); But that doesn't work either. Any thoughts?
-
As a Flash Developer coming into Canvas, I'm loving GSAP. But I was amazed how slow it was just tweening the color of a EaselJS object. Experiment tweening alpha and scale: http://antoniobrandao.com/canvas/ Experiment like the above, but also tweening the "tint" of an easelJS Shape http://antoniobranda...vas/index2.html It completely destroys it!!! Am I doing it wrong or is this just slow? Check the source code in the experiments. Any help appreciated!
