Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'gsap'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hello. I have some code I'm having trouble with - I'd like to do animated rollovers however it is not working correctly. Can you please advise where I am going wrong? Thank you! <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>GreenSock: HTML5</title> <!--css goes here --> <style> #container { width:924px; height:250px; background-color:#000000; opacity:0; position:relative; } #my_films { width:875px; height:422px; opacity:0; margin-top:55px; margin-left:20px; } #season2 { width:285px; height:44px; margin-top:0px; margin-left:19px; } #grantland { width:304px; height:44px; margin-top:5px; margin-left:0px; opacity:0; } #packshot { width:365px;; height:265px; position:absolute; left:335px; top:20px; opacity:0; } #holiday { width:142px; height:16px; position:absolute; left:722px; top:84px; opacity:0; } #starts { position:absolute; left:714px; top:104px; opacity:0; } #buy { position:absolute; left:747px; top:210px; opacity:0; background-color:#000000; background-image: url('images/buy_outline.png'); width:88px; height:41px; } </style> </head> <body> <div id="container"> <div><img src="images/my_films.svg" id="my_films" /></div> <div id="season2"><img src="images/season2.png" /></div> <div id="grantland"><img src="images/grantland.png"></div> <div id="packshot"><img src="images/packshots_lrgest.png" /></div> <div id="holiday"><img src="images/holiday.png" /></div> <div id="starts"><img src="images/starts.png" /></div> <div id="buy"><a href="#">Buy</a></div> </div> <!--CDN link for the latest TweenMax--> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.2/TweenMax.min.js"></script> <script> window.onload = function(){ var tl = new TimelineMax({repeat:2, repeatDelay:3}); tl.add( TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn}) ); tl.add( TweenLite.to(my_films, 1, {width:177, height:44, alpha:1, ease:Power1.easeIn}) ); tl.add( TweenLite.from(season2, 1.5, {alpha:0}) ); tl.add( TweenLite.to(grantland, .5, {x:19, alpha:1}) ); tl.add( TweenLite.to(packshot, 1.5, {alpha:1, ease:Power4.easeIn}) ); tl.add( TweenLite.to(holiday, 1, {alpha:1}) ); tl.add( TweenLite.to(starts, .75, {alpha:1}) ); tl.add( TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut}) ); } $("#buy").hover( function(){ TweenLite.to(this, 0.5, {scale:1.5, backgroundColor:"red"}); }, function(){ TweenLite.to(this, 0.5, {scale:1, backgroundColor:"black"}); } ); </script> </body> </html> Any ideas? (the buy text is in there as placeholder - I'd like to see the background changing like in this example: http://codepen.io/GreenSock/pen/deb6ac1e2c8ce73ac7d68efba088ed00
  2. I am trying to create and html5 ad unit using images, canvas and GSAP…I am having a problem seeing it up and loading thin the images…I am trying not to pull in many libraries. Any help would be appreciated. Thanks
  3. Hi there - I have a file that works just how I want in all the browsers. However I must support back to IE8. The animation is not working at all in IE8. 9 is fine 10 is fine.. but 8? Totally broken. Elements appear randomly on the page and do not animate at all. Please help. Here is my code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>GreenSock: My films</title> <!--css goes here --> <style> #container { width:924px; height:250px; background-color:#000000; opacity:0; position:relative; } #my_films { width:875px; height:422px; opacity:0; margin-top:55px; margin-left:20px; } #season2 { width:285px; height:44px; margin-top:0px; margin-left:19px; } #grantland { width:304px; height:44px; margin-top:5px; margin-left:0px; opacity:0; } #packshot { width:365px;; height:265px; position:absolute; left:335px; top:20px; opacity:0; } #holiday { width:142px; height:16px; position:absolute; left:722px; top:84px; opacity:0; } #starts { position:absolute; left:714px; top:104px; opacity:0; } #buy { position:absolute; left:747px; top:210px; opacity:0; } </style> </head> <body> <div id="container"> <div><img src="images/my_films.svg" id="my_films" /></div> <div id="season2"><img src="images/season2.png" /></div> <div id="grantland"><img src="images/grantland.png"></div> <div id="packshot"><img src="images/packshots_lrgest.png" /></div> <div id="holiday"><img src="images/holiday.png" /></div> <div id="starts"><img src="images/starts.png" /></div> <div id="buy"><a href="#"><img src="images/buy.jpg" /></a></div> </div> <!--- The following scripts are necessary to do TweenLite tweens on CSS properties --> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> <script> window.onload = function(){ TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn}); TweenLite.to(my_films, .75, {width:177, height:44, alpha:1, ease:Power1.easeIn, delay:1}); TweenLite.from(season2, 1.5, {alpha:0, delay:2.2}); TweenLite.to(grantland, .5, {x:19, alpha:1, delay:3}); TweenLite.to(packshot, 5, {alpha:1, ease:Power4.easeIn}); TweenLite.to(holiday, 1, {alpha:1, delay:4}); TweenLite.to(starts, .75, {alpha:1, delay:4.8}); TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut, delay:5.5}); } </script> </body> </html>
  4. 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.
  5. 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
  6. 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!
  7. 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
  8. 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?
  9. 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!
  10. 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>
  11. madina

    Machine Gun Effect

    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
  12. 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?
  13. 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?
  14. 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!
×