Jump to content
GreenSock

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
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. See the Pen GSAP JS: multiple text-shadow by GreenSock (@GreenSock) on CodePen.
  2. GreenSock

    3D Transforms

    See the Pen 3D Animation with GSAP by GreenSock (@GreenSock) on CodePen.
  3. I wonder, it's this possible. I've been reading about how good is this platform and I also read about how this plugin could improve performance even though it's a JQuery native code.
  4. The problem seems to be in my event handler "move_box". The event listeners were apparently added, if I manually replace the i in menu with a 0 or 1 in the move_box function clicking the buttons cause the boxes to move. I have this up on JSFIddle http://jsfiddle.net/jimeast123/F4WkU/1/ <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <style type="text/css"> .box { margin: 0px; height: 50px; width: 50px; background-color: blue; } li {list-style: none;} .inner {; display: block;} .inner li, .box {display: block;} #outer li { display: inline-block;} </style> </head> <body> <ul id="outer"> <li><button type="button" class="toggle" name="btn1">Open</button> <ul class="inner"> <li><div class="box"></div></li> </ul> </li><!-- end of outer li --> <li><button type="button" class="toggle" name="btn2">Open</button> <ul class="inner"> <li><div class="box"></div></li> </ul> </li> <!-- end of outer li --> </ul> <!-- end of outer --> <script> var menu = document.getElementsByClassName('box'); var btn = document.getElementsByClassName('toggle'); function move_box(e) { if(this.innerHTML === 'Open') { TweenLite.to(menu[i], 2, {y: 100, ease:Power2.easeOut}); this.innerHTML = 'Close'; } else { TweenLite.to(menu[i], 2, {y: 0, ease:Power2.easeOut}); this.innerHTML = 'Open'; } } for (var i = 0; i < btn.length; i++ ) { btn[i].addEventListener("click", move_box, false); } </script> </body>
  5. Hi everybody! By advance, please excuse: 1. my english (I'm french, and I don't find any good answers about Gsap on french forums...) 2. my less of knowledge about coding... I know what is Code for.. 2 weeks.. 3. my (a bit) blonde brain.. But I got faith and I'm ready to learn!!! So, here's the situation: My final goal is to make a full personalized menu for my blog, that contains very seamless animations. The first animation (which I'm testing now) is color changing of the buttons' letters. The second one will be the "deployment" of an image that "get out" behind each button and then come in. Both animations will start "on mouse over" and when the button is clicked and the relative page is activated. My first question is about the first, simple animation: color of the buttons. What I'v already done: - created a drawn menu on Gimp - created the same image but with each button in right color for activated state - I've search for a few weeks on tutorials and forums, and found a code that works "A code that works"... BUT: it seems to work only on certain machines (don't understand why it works on my mac on Google Chrome but not on my office's PC on Google Chrome too!) and most of all, it is no seamless at all! (got to wait a few seconds with mouse over before the -images charge and- color changes. I read some interesting stuffs about the "wonderful Gsap library". But it's very difficult for me to understand how to make the right gsap code that is very complicated for me compares to my actual code (I don't even know if it's "simple javascript" code or something else - you will see that). Could you please give me a simple explanation of what I need to do in my case, or even indicate the right code to me..? Here's my code: <div> <img name="Menu" src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%C3%AF%20crash%20test%20gelly%20texte.png" width="960" height="95" border="0" usemap="#menu jelly kobai" /> <map name="menu jelly kobai"> <area title="Accueil" shape="rect" coords="4,27,117,93" href="http://kobai-uneblondeetblogger.blogspot.fr/" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/dsltunaowxbg0e3/menu%20bouton%20accueil%20survol.png'" onmouseout="document.Menu.src='https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'" onclick="document.Menu.src='https://photos-4.dropbox.com/s/dsltunaowxbg0e3/menu%20bouton%20accueil%20survol.png'" alt="Accueil'" /> <area title="Une Blonde et Blogger" shape="rect" coords="128,27,245,94" href="http://uneblondeet-blogger.blogspot.fr/" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/f9khuaph4qqhnk3/menu%20bouton%20blonde%20survol.png'" onmouseout="document.Menu.src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'" Onclick="document.Menu.src='https://photos-4.dropbox.com/s/f9khuaph4qqhnk3/menu%20bouton%20blonde%20survol.png'" alt="Une Blonde et Blogger" /> <area title="Onglet test" shape="rect" coords="255,27,369,94" href="http://kobai-uneblondeetblogger.blogspot.fr/p/un-onglet-test.html" onmouseover="document.Menu.src='https://photos-4.dropbox.com/s/7h3uglfwgxjk0uu/menu%20bouton%20onglet%203%20survol.png'" onmouseout="document.Menu.src="https://photos-4.dropbox.com/s/mpmuozbm5zaaj6j/base%20onglets%20translucides%20koba%c3%af%20crash%20test%20gelly%20texte.png'" Onclick="document.Menu.src='https://photos-4.dropbox.com/s/7h3uglfwgxjk0uu/menu%20bouton%20onglet%203%20survol.png'" alt="Onglet test" /> </map> </div> Sorry for the entire code, I've searched in it but didn't find this widget's code - ?? (it's a HTML/Javascript widget in a Blogger blog. url of my "testing" blog: http://kobai-uneblondeetblogger.blogspot.fr Thanks a lot by advance for your help! Trinita Girl
  6. I am trying to have an element scale on mouseover but the div and the text inside is pixelated. I can't figure out why... http://codepen.io/dchadney/pen/BnlFi
  7. Hi everyone this is my problem, i making a little practice and i want rotate a image but i don´t want use CSS only script var img; function init(){ ctx = document.getElementById("canvas").getContext("2d"); img = new Image(); img.src = "http://postimg.org/image/qj0abntbh/"; img.xpos = 50; img.ypos = 10; img.onload = function() { TweenLite.ticker.addEventListener("tick", loop); } function loop(){ ctx.clearRect(0, 0, 800, 600) ctx.drawImage(img, img.xpos, img.ypos); } TweenMax.to(img, 7, { rotation: 360, delay:2.2, repeat: 5}); } thanks
  8. Hello - My last thread became a new topic so I'm starting one specific for this one. Here is the original thread: http://forums.greensock.com/topic/8978-animated-rollovers-not-functioning-properly/ So I'm trying to use JQuery (document).ready to load some tweenlite rather than window onload. This isn't working so far, I know the tweenlite works because it's working with window.onload - here is the code: <body> <div id="container"> <div id="lens_flare"><img src="images/lens_flare.png" /></div> <div><img src="images/new_season.png" id="share" /></div> <div id="love"><img src="images/new_you.png"></div> <div id="my_logo"><img src="images/my_logo.gif"></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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> jQuery(document).ready(function(){ console.log("DOM is ready"); jQuery(window).on("load", function(){ console.log("window is loaded"); TweenLite.to("lens_flare", .25, {alpha:1, scaleX:1.2, scaleY:1.2, delay:1}); TweenLite.to("lens_flare", .25, {alpha:0, scaleX:1, scaleY:1, delay:1.25}); TweenLite.to("container", 1, {autoAlpha:1, ease:Quad.easeIn}); TweenLite.to("share", .75, {delay:3, alpha:1}); TweenLite.to("love", .5, {alpha:1, delay:3.5}); TweenLite.to("my_logo", .75, {left:0, alpha:1, delay:4}); }); }); </script> </body> This displays as blank. Any help? Thanks!
  9. 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
  10. 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
  11. 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>
  12. Feature lists are nice, but they can get lengthy and they don't always tell the story in a way that's relevant to you as the developer/designer in the trenches, trying to get real work done for real clients. You hear plenty about theoretical benefits of CSS animations or some whiz-bang library that claims to solve various challenges, but then you discover things fall apart in all but the most modern browsers or the API is exceedingly cumbersome or there are frustrating "gotchas". You need things to just work. .expander { cursor: pointer; font-weight: 400; position: relative; } section .card{ padding-bottom: 6px; margin-bottom: 10px; padding-left: 35px; padding-top: 6px; box-shadow: none; } .expandable-list { padding-left: 0; } .expandable-content { padding: 0; height: 0; overflow: hidden; } .expander-button { position: absolute; border-radius: 50%; background-color: #BBB; width: 15px; height: 15px; display: inline-block; vertical-align: middle; border: 1px solid #FFF; margin-top: 8px; /* vertically center with heading top: 50%; margin-top: -9px; */ left: -8px; margin-left: -18px; font-size: 0px; } .expander-plus, .expander-minus { position: absolute; background-color: #FFF; display: block; } .expander-plus { width: 1px; height: 7px; left: 6px; top: 3px; } .expander-minus { width: 7px; height: 1px; top: 6px; left: 3px; } .project-post p { font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } .project-post h2 { padding-top: 16px; margin-bottom: 10px; } .expPoint, .project-post .expList li { font-size: 1.1em; list-style: none; line-height: normal; margin: 0px 0px 0px 8px; padding: 6px 4px 4px 20px; position:relative; border: 1px solid rgba(204,204,204,0); } .expPoint, .expContent { font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } .expPoint:hover, .project-post .expList li:hover { background-color:white; border: 1px solid rgb(216,216,216); } .expContent { height: 0px; overflow: hidden; color: #656565; font-size: 0.9em; line-height: 150%; font-weight: normal; margin: 5px 0px 0px 0px; padding-top: 0px; } .toggle { width:6px; height:8px; position:absolute; background-image:url(/_img/toggle_arrow.gif); background-repeat: no-repeat; left: 9px; top: 12px; } .expMore { color: #71b200; text-decoration: underline; font-size:0.8em; } #featureAnimation, #featureBox { background-color:#000; border: 1px solid #333; height: 220px; overflow:hidden; line-height: normal; font-size: 80%; } #featureAnimation { position:relative; visibility:hidden; } #featureBox { position:absolute; } #featureAnimation, #featureBox, #whyGSAP, .featureTextGreen, .featureTextWhite { width: 838px; } #whyGSAP, .featureTextGreen, .featureTextWhite { text-align: center; } #whyGSAP, .featureTextGreen, .featureTextWhite { font-size:50px; position:absolute; font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; top:0; } .featureTextGreen { color:#91e600; font-weight: bold; } .featureTextWhite { color:white; font-weight:normal; } .star { position: absolute; width: 16px; height: 16px; display: none; } #browserIcons { top:64px; left: 100px; width: 92px; height: 92px; position: absolute; text-align:left; } #browserIcons img { position:absolute; } .featureTextMinor { color:#CCCCCC; font-weight:normal; font-size:20px; position:absolute; font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; visibility:hidden; } .dot { position:absolute; background-color: #91e600; } #ctrl_slider { position:absolute; width: 725px; height:10px; left:18px; top:196px; background: rgba(80,80,80,0.3); border:1px solid rgba(102,102,102,0.5); visibility:hidden; } Why GSAP? Performance Compatibility Other tools fall down in older browsers, but GSAP is remarkably compatible. Scale, rotate & move independently (impossible with CSS animations/transitions) XNJYHQLJYQEW CSS, canvas libraries, colors, beziers, etc. Total control pause(), play(), reverse(), or timeScale() any tween or sequence. GSAP The standard for HTML5 animation replay
  13. 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.
  14. GSAP itself is pure JavaScript and should work in virtually ALL browsers. GSAP wasn’t intended to solve all browser incompatibilities, but it does implement wizardry for critical features like opacity, transforms (rotation, scaleX, scaleY, skewX, skewY, x, and y), and transformOrigin so those should work in all major browsers even back to IE6. Firefox doesn’t support backgroundPositionX or backgroundPositionY, so those specific properties won’t work but backgroundPosition will for virtually all browsers. There is NOT a predetermined list of css properties that you can tween – the platform will attempt to tween ANY property you pass in. If it is numeric, it will tween it. If it isn’t numeric and it isn’t a recognized special property, CSSPlugin will just set the property to the value you provide (without tweening it). So, for example, if you try to tween to display:"inline", that isn’t a tweenable property but it will still be set accordingly during the tween, so feel free to use that to your advantage.
  15. You can animate ANY numeric property of ANY JavaScript object – it’s not just for DOM elements. So yes, you can animate canvas objects, EaselJS assets, and pretty much anything JavaScript-related. In fact, GSAP even has an EaselPlugin to make it easier to animate EaselJS properties. If you need to run logic after each refresh (like to redraw things on the canvas), either use an onUpdate on the individual tween/timeline or add a “tick” event listener to the core Ticker that drives the platform.
  16. 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
  17. 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!
  18. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. With the release of iOS 7, I was anticipating some big leaps forward in browser performance. What I found was quite surprising. Is anyone else experiencing the same thing? Here's a quick [and very casual] video showing what I discovered: A lot of people in the industry talk about the benefits of using CSS transitions because they're so much faster, especially with transforms (scale/translate/rotate) on mobile devices. What happened? Why is Zepto (which uses CSS transitions) so much slower? GSAP's performance remains solid in iOS 7 (far better than jQuery and other libraries), but CSS transitions fall flat on their face (at least with transforms). Can anyone shed some light on what's happening? Are you seeing the same results in iOS 7? Also, is anyone else seeing worse performance when altering the scrollTop or scrollLeft of DOM elements? Useful links Speed test Draggable Demo CSS Transitions/Animations vs. GSAP Cage Match jQuery vs. GSAP Cage Match Why GSAP? A practical guide for developers UPDATE: Apple reached out to us and acknowledged the apparent bug and said they're working on a fix. (Thanks Apple)
  19. 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
  20. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Making a DOM element draggable isn't terribly difficult - there are jQuery plugins and even some native HTML5 capabilities in newer browsers. But generic dragging is kinda boring. What about smooth, natural momentum-based continuation after the user releases the mouse (or touch on mobile devices)? What about imposing bounds and edge resistance and silky-smooth redirection to certain landing values that you provide? Or flick/drag scrolling with bounce-back that doesn't look awkward? Or instead of dragging to change the position of an element, what if you want to spin it? Maybe you even want to track the momentum and let it come to rest naturally or rig it to glide to a stop at a certain value, Wheel-of-Fortune style? Yeah, that's a lot more complex. In fact, it can be a real drag to build (sorry, the pun was irresistible). Draggable makes it remarkably simple. More importantly, it delivers a very fluid user experience on both mobile devices and desktop browsers. Instead of explaining what makes Draggable so special, we built an interactive demo that showcases some of its talents. There are even code samples that update as you change the options. Go play around and have some fun. View Demo
  21. 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?
  22. 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!
  23. 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
  24. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. This video walks you through some common problems that professional animators face every day and shows you how GSAP’s TimelineLite tackles these challenges with ease. Although GSAP is very powerful and flexible, the API is beginner-friendly. In no time you will be creating TimelineLite animations that can bend and adapt to the needs of the most demanding clients and art directors. Watch the video and ask yourself, "Can my current animation toolset do this?" Enjoy. Video Highlights Tweens in a TimelineLite naturally play one-after-the-other (the default insertion point is at the end of the timeline). No need to specify or update the delay of each tween every time the slightest timing changes are made. Tweens in a TimelineLite don't need to play in direct sequence; you can overlap them or easily add gaps. Multiple tweens can all start at the same time or slightly staggered. Easily to rearrange the order in which tweens play. Jump to any point of the timeline to finesse a particular animation. No need to watch the whole animation each time. Add labels anywhere in the timeline to mark where other tweens should be added, or use them for navigation. Control the speed of the timeline with timeScale(). Full control over every aspect of playback: play, pause, reverse, resume, jump to any label or time, and much more. Unlike jQuery.animate() or other JS libraries that allow you to chain together multiple animations on a particular object, GSAP’s TimelineLite lets you sequence multiple tweens on multiple objects. It's a radically different and more practical approach that allows for precise synchronization and flexibility. If you are still considering CSS3 animations or transitions for robust animation after watching this video, please watch it again Check out this Pen! If you are wondering what "autoAlpha" refers to in the code above, its a convenience feature of CSSPlugin that intelligently handles "opacity" and "visibility" combined. Recommended reading: Main GSAP JS page Jump Start: GSAP JS Speed comparison Cage matches: CSS3 transitions vs GSAP | jQuery vs GSAP jQuery.animate() with GSAP: get the jquery.gsap.js plugin! 3D Transforms & More CSS3 Goodies Arrive in GSAP JS
×