Search the Community
Showing results for tags 'gsap'.
Found 1,092 results
-
I was asked on Facebook about using GSAP in banner ads that are created for/in the MRAID system, and since Facebook is really bad for tech support and posting code, I figured I'd start a topic here so others could benefit too... You can create and test an ad in a browser-based simulator here: http://webtester.mraid.org/. I noticed that there was a problem with the simulator or MRAID itself that was causing it to trigger the ad BEFORE 3rd party libraries had finished loading. So in this case, TweenLite wasn't defined yet, thus no animations would work. The simple workaround is to add some conditional logic so that your animation code doesn't run until both MRAID is ready and TweenLite/CSSPlugin has loaded. Here's a simple example that seems to work fine in the simulator: <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/plugins/CSSPlugin.min.js"></script> <div id="box" style="background-color:green; width:100px; height: 50px; position:absolute;"></div> <script> //this method gets called when the ad is ready and should run. function runMyAd() { TweenLite.to("#box", 2, {y:100, opacity:0.5}); } //this function keeps checking to see if mraid is ready and TweenMax has finished loading. function doReadyCheck() { if (mraid.isViewable() && window.TweenLite) { runMyAd(); } else { setTimeout(doReadyCheck, 100); } } doReadyCheck(); </script> Useful link: Common problems and best practices: http://www.iab.net/media/file/MRAID_Best_Practices_Final.pdf
-
See the Pen SplitText: Multiple Split Types by GreenSock (@GreenSock) on CodePen. This demo shows how you can split text into characters, lines and words (or any combination). Check out how easy it is to animate text once it is split. Be sure to check out SplitText and the [docs id="js.SplitText" linktext="SplitText documentation"]. -
See the Pen Draggable "Toss" Demo (4col) by GreenSock (@GreenSock) on CodePen. See many of Draggables properties in action including bounds, liveSnap, snap, edgeResistance and more. This demo is a great starting point to get familiar with Draggable and ThrowProps plugin. Fork, edit and enjoy! Be sure to read the [docs id="js.Draggable" linktext="Draggable Documentation"]. -
-
I have been trying to work using the skewX and skewY properties. For some reason skewY has been acting very strange, although skewX seems to work fine. Here : http://codepen.io/praneybehl/pen/lkhFn Is this a bug? Thanks, Praney
-
Bright Media is an agency with an award winning portfolio. Be sure to check out the ground-breaking animation on this FWA Site of the Day. -
See the Pen GSAP JS Bezier: Disperse and Converge by GreenSock (@GreenSock) on CodePen. -
See the Pen GSAP JS: multiple text-shadow by GreenSock (@GreenSock) on CodePen. -
See the Pen 3D Animation with GSAP by GreenSock (@GreenSock) on CodePen. -
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.
-
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>
-
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
-
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
-
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
-
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!
-
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
-
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
-
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>
-
Feature lists 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 about theoretical benefits of CSS animations or some fancy new library that claims to solve various challenges, but then you discover things fall apart when you actually try to use it or the API is exceedingly cumbersome. 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- 1 comment
-
- 5
-
-
- workflow
- compatibility
- (and 7 more)
-
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.
-
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.
-
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. -
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
-
In our support forums.
