Search the Community

I was bidding on a project today and requested to use GSAP as my Javascript animation engine (they had originally said CSS transitions). The one question they had was 'how far back' GSAP goes — that is, will it work in IE9, IE8, and other older browsers? I had never thought of this and didn't know the answer. Also they wanted to know if GSAP 'degraded gracefully'. If GSAP doesn't work on all older browsers, how do I handle that? I know Modernizr can be used (or could be used) to provide fallbacks, but I don't know that it has a test for Greensock. What would I test for? Are there polyfills? Thanks for any info!

[sEE CODEPEN] I'm trying to make an easy way to implement multiple views on a single webpage using HTML5 GSAP animation. So I declare an object constructor "pageElement." Inside I have a method that triggers an animation based on object properties declared earlier in the constructor given if I want the object on or off screen. The code throws an error [sEE ATTACHMENT.] Essentially what the error tells me, is that within the GSAP declaration, it does not accept methods within methods (method-ception). I hope there's some error in my code... This would be awesome. Anyway, thanks for taking a look, and have an awesome day Jacob Alford @jacob_alford

Hello All, In my attached file, I have tried to modify a simple slider as per my requirement. But, when I slide the slider, the target image gets displayed only after slide animation is finished. Can someone help? Also on mobile, it is sliding very slowly. Please help. I have attached my file for your reference. index.html

So I have 2 problems here, 1. For some reason, the rotation seems to reverse its direction for one of the increment upon completing a full circle. Currently I intend to have the circular blob move through every 30 angles on clicking the button. 2. When I click the button again during the transition, it resets the transition instead of chaining it. I was trying to find ways in which I can chain the animation so that it doesn't reset but allow the user to continue onto the next item. Thanks for any help in advance.

Hey, I've been using the scrollTo plugin extensively throughout my web app and up until now its been running great. I just came across a use case that requires an event to fire when the user manually scroll's while the scrollTo plugin is auto scrolling. Does scrollTo have a callback that fires when the scroll is killed by a manual scroll? I've tried onComplete but that only fires if the whole auto scroll finishes before any manual scroll event. Thanks Josh

Has anyone created a Durandal transition using Greensock? They have some basic instructions (http://durandaljs.com/documentation/Creating-A-Transition.html) and a very complicated sample (https://github.com/BlueSpire/Durandal/blob/master/src/transitions/js/entrance.js) but I don't know how to translate this to the GSAP world. For one thing, the transition module must return a promise. I have a pretty good idea of what a promise is but am, again, unsure of the GSAP code to make this happen. If anyone has any example code that would be most helpful — or some pointers. Thanks!

Flash was once a passion. It still feels more advanced than HTML/Javascript for interactive projects due to years of developments added to it. Lately though I've become very interested in the possibilities of JavaScript combined with advancements in libraries like GreensockJS. So this is an experiment, and a source of inspiration of sorts. Also I thought it would be great to have a single topic where everyone can share your examples! I know some of you have a lot of things you've created lately or are in the works. There's probably some really cool things out there! I'd personally like to see what things GreensockJS is capable of reproducing from what we were used to seeing in Flash advertisements, and other animated/interactive Web "creations". Needless to say my GreensockJS samples aren't quite the best yet. I've just been experimenting enough lately to see just what it can do. Though still, I'll start by sharing a few basic ad banner samples made with Greensock JS TweenLite. So check it out here. Everything on the page is HTML/JavaScript/CSS/GreensockJS. Note it might be a little slow loading (not due to Greensock in any way). Just refresh to see the full animations again. So again if you've made something original and creative in Greensock JS, share it here for others to see. Enlighten us all on the possibilities of Greensock JS!

Hi, After image is drop into container , I want to move copy of the original image to be move when original image dragend within container. I tried but it display copy image each time when original image dragend. can anyone help me? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Prototype</title> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <style> body{padding:20px;} #container{ border:solid 1px #ccc; margin-top: 10px; width:350px; height:350px; } #toolbar{ width:350px; height:35px; border:solid 1px blue; } </style> <script> $(function(){ var $house=$("#house"); $house.hide(); var $stageContainer=$("#container"); var stageOffset=$stageContainer.offset(); var offsetX=stageOffset.left; var offsetY=stageOffset.top; var stage = new Kinetic.Stage({ container: 'container', width: 350, height: 350 }); var layer = new Kinetic.Layer(); stage.add(layer); var image1=new Image(); image1.onload=function(){ $house.show(); } image1.src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"; $house.draggable({ helper:'clone', }); $house.data("url","house.png"); // key-value pair $house.data("width","32"); // key-value pair $house.data("height","33"); // key-value pair $house.data("image",image1); // key-value pair $stageContainer.droppable({ drop:dragDrop, }); function dragDrop(e,ui){ var x=parseInt(ui.offset.left-offsetX); var y=parseInt(ui.offset.top-offsetY); var element=ui.draggable; var data=element.data("url"); var theImage=element.data("image"); var image = new Kinetic.Image({ name:data, x:x, y:y, image:theImage, draggable: true, dragBoundFunc: function(pos) { return { x: pos.x, y: this.getAbsolutePosition().y } } }); image.on("dragend", function(e) { var points = image.getPosition(); var image1 = new Kinetic.Image({ name: data, id: "imageantry", x: points.x+65, y: points.y, image: theImage, draggable: false }); layer.add(image1); layer.draw(); }); image.on('dblclick', function() { image.remove(); layer.draw(); }); layer.add(image); layer.draw(); } }); // end $(function(){}); </script> </head> <body> <div id="toolbar"> <img id="house" width=32 height=32 src="http://vignette1.wikia.nocookie.net/angrybirds/images/b/b6/Small.png/revision/latest?cb=20120501022157"><br> </div> <div id="container"></div> </body> </html>

Hi all, This is my first time posting on these forums. I'm a regular browser but have yet to post! First off - love Greensock. It has transformed how I go about building and designing websites and applications due to the power of it. It really is awesome! My question today is quite broad, but if possible i'd love somebody to point me in the right direction as to how to complete it. I was wondering what's the best method to use a hover state to navigate around a div, both horizontally and vertically through CSS transforms. Would you have to give the div a strict width and height then navigate around that? The effect I'm looking to replicate is used here - http://www.jakobdeboer.com/gallery/series/ which i've noticed uses tweenmax to scroll through the div. I know this isn't a very specific question, but if somebody could point me in the right direction I'd be very grateful. Thanks, Oliver

Hiya - this is my first question, and I hope it's not too dumb. I stumbled across Greensock while fiddling with Edge Animate. However, I'd like to hand-code some of this stuff. Unfortunately, I have virtually zero experience with Javascript. (I did take a class about then years ago, and I vaguely remember some concepts, but that's about it.) My familiarity is with plain-old HTML & CSS. My goal is to try and reverse an animation. Nothing spectacular. However, I don't even know where to start. I'm sure I can cut & paste and tweak, but I'd like a more solid basis. Am I in the wrong place? Thanks! J.

Love the product, first time posting. I couldn't find in the docs if there was a method to detect if the draggable object moved left or right (or up or down). I was calculating using onDragEnd document.getElementById('draggableobject').offsetLeft - this.pointerX In some cases I had moved the element to the right just a teeny bit but received a negative number from the calculation above. Any advice would be appreciated.

I am wondering if there is a way to tween essentially the same way as you would using the DynamicPropsPlugin in As3. something like this from your documentation but in javascript. TweenLite.to(myDiv, 3, {dynamicProps:{x:getMouseX, y:getMouseY}}); Secondly would it then be possible (without using a function like above) to reference a dynamic value of another element. I would want the Tween to update if "anotherdiv.width" changed during the course of the animation. Maybe the only solution is using whatever answer there is for my first question? TweenLite.to(div, 1.5, {width:anotherdiv.width}); thanks -ross

Hey all! I've been doing a lot of animating along bezier curves and created a simple little helper tool/function that converts an SVG path into an array of cubic bezier points that can be plugged directly into GSAP Tweening functions. It's still missing a little functionality for quadratic and elliptical arc movements, but I haven't come across any issues with it yet converting SVGs saved out of Illustrator. Just thought I'd share in case anyone else finds it useful. http://github.com/mattanglin/svg-to-cubic-bezier I'll update to incorporate the other SVG movements (and cleanup the code. It's pretty quick and dirty at the moment...) as I have time. Any feedback welcomed. Thanks!

Hey guys. I'm doing a simple tween on a score bar which tweens the width of a div from 0% to 0-100% depending on the users score in a game. I want to play a sound when the bar animates and passes various points. I'm struggling to get the % value back out of my tween instance during the onUpdate callback. tween.target is an array containing my div. I can call: onUpdate: function() { # get a numeric percentage value val = parseFloat(this.target[0].style.width) if(val > 0 && !played_one) { soundManager.play('sfx','score_1'); played_one = true; } else if(val > 50&& !played_two) { soundManager.play('sfx','score_2'); played_two = true; } else if(val > 90 && !played_three) { soundManager.play('sfx','score_3') played_three = true; } } This solution isn't the most elegant I know. But something really doesn't feel right about "this.target[0].style.width" I'm not 100% that this is going to give me the current percentage value correctly in all browsers. I thought there might be a GSAP to give me this value reliably.

What is the best way to have two TweenMax/GSAP versions running on the same page? Is it possible to handle conflicts between two versions of TweenMax/GSAP loaded in the same page? Lets say there are two applications on the same page. The other applications is from a different developer and you have no idea if the other developer is using GSAP. What is the best way to make sure your code is using the version of TweenMax/GSAP that it was intended to use?

Hi I am working on a website for a client which is basically an old flash site which I am translating into HTML with GSAP animation. The whole thing also uses parallax.js to create a layered 3d effect. This works great across all devices and moves when an ipad is tilted etc. My problem is that tweenmax is clashing somehow with the parallax javascript and causing the animations to jump or in the case of CSS opacity the fade does not work at all. When I remove parallax.js then it works just fine. So I did some research and then it occurred to me that it may be possible to create the parallax effect without using the plugin but through gsap itself and then it wouldn't cause compatibility issues. But although I can find examples of parallax controlled by mouse movement, there doesn't seem to be anything about creating this effect with device orientation/tilting etc Is this even possible? Thanks

Please help. Despite many efforts this is not rotating the ellipses.. ive followed the same syntax which has worked before with other attributes being animated, and checked other codepens which seem to work! GSAP seems very sensitive to syntax, and the docs on line are not helpful... thanks

I want to animate something (the position of the background image) of a div when the user hovers over (mouseovers) it. There will be several of these divs on a single page. It would be REALLY nice to be able to specify classes, not IDs, of DIVs, when constructing greensock timelines, but as that's impossible I've had a stab at it in this jsfiddle: http://jsfiddle.net/cheolsoo/mp3qes6n/ 1/ why doesn't the (global) value of i get set when the mouseover event fires? I initialized i to 611 but it doesn't change when I mouseover one of the other divs. 2/ (much less critical as I can work around it) my fiddle works (sort of) because I stripped "vid_" away from the div ID and then added it back in the TimelineMax definition. I tried simply passing a variable (e.g. i where i='vid_611' rather than '611') instead of "vid_"+i, but then nothing worked at all. Why not? (Is that a greensock question or a Javascript question? I'm such a moron I'm not even sure.) thanks, eh Ryan

Hi all, I'm doing a front page with 5 animations where one fades away in place of another, and so on, and then it loops. Rather than write one enormous hideous looping timeline I thought I'd make each of the animations a separate timeline and use callbacks to trigger subsequent timelines and JQuery to fade the relevant DIVs in and out. A condensed version of my code is below. The callbacks work great until I get to the last animation (vr_pan5). It fades in the DIVs required to replay the first animation, but then doesn't restart the first animation (vr_pan1). I tried shuffling the order of the timeline declarations in the code. The issue seems to be an inability to play a timeline at the top of the code, after having played a timeline further down. I also tried moving code in and out of the window.load function, but that didn't make a difference either. Sorry for asking what is essentially a Javascript question and not a Greensock question! Also, sorry for not creating a codepen; I figured a glance at my semi-pseudocode would be enough for someone enlightened. Code follows: var vr_pan1, vr_pan2, vr_pan3, vr_pan4, vr_pan5; vr_pan5 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg5", "#bg5", "#fg1", "#bg1", vr_pan1]}); vr_pan5 .add("start") //tween some stuff ; vr_pan4 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg4", "#bg4", "#fg5", "#bg5", vr_pan5]}); vr_pan4 .add("start") //tween some stuff ; vr_pan3 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg3", "#bg3", "#fg4", "#bg4", vr_pan4]}); vr_pan3 .add("start") //tween some stuff ; vr_pan2 = new TimelineMax({paused:true, repeat:0, onComplete:nextAnim, onCompleteParams:["#fg2", "#bg2", "#fg3", "#bg3", vr_pan3]}); vr_pan2 .add("start") //tween some stuff ; vr_pan1 = new TimelineMax({paused:true, repeat:0, onComplete:nextAnim, onCompleteParams:["#fg1", "#bg1", "#fg2", "#bg2", vr_pan2]}); vr_pan1 .add("start") //tween some stuff ; function nextAnim(fadeout_div1, fadeout_div2, fadein_div1, fadein_div2, new_anim) { $(fadeout_div1).fadeOut(); $(fadeout_div2).fadeOut(); $(fadein_div1).fadeIn(); $(fadein_div2).fadeIn(); var o = new_anim; o.restart(); } $( window ).load(function() { vr_pan1.play(); }); Thanks, eh.

This may be obvious, but I was wondering the best practice for dealing with Timelines on rollover/out states? Specifically I do a Timeline animation on rollover of an object (using jQuery's hover()) — on rollout I want to kill that timeline and tweenback — I use a simple TweenMax on the rollout because I don't simply want to reverse the Timeline (that would be the obvious and elegant solution), as the 'out animation' is different from the 'in animation'. The best I could come up with is to store the Timeline in the object, and then kill it on rollout (myTImeline.kill()) and then do the 'out animation'. Is there a more elegant way? I take it because a Timeline is a complex thing that there's no equivalent to TweenMax's 'kill all tweens of this object'?

Hello to all, As some devs fail to make FabricJS work properly with CreateJS suite, and as there is no clean alternative righ now, do you plan to port TransforManager into HTML5/JS world ?

i have to be doing something wrong lol....first off i have a parallax scrolling intro to my site ....using GSAP. i have abt 20 items in total with about 70 individual animations lol..... this is what a small section of my code looks like var svg3 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotation: 180 }); var sceneSvg3 = new ScrollScene({ duration: 1000, offset: 2000}) .setTween(svg3) .addTo(controller); var svg4 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotationY: 180 }); var sceneSvg4 = new ScrollScene({ duration: 1000, offset: 7200}) .setTween(svg4) .addTo(controller); var svg5 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotationX: 180 }); var sceneSvg5 = new ScrollScene({ duration: 1000, offset: 9000}) .setTween(svg5) .addTo(controller); var svg6 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotation: 45}); var sceneSvg6 = new ScrollScene({ duration: 1000, offset: 11000}) .setTween(svg6) .addTo(controller); var svg7 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4 " ,1, { rotation: 90}); var sceneSvg7 = new ScrollScene({ duration: 1000, offset: 13000}) .setTween(svg7) .addTo(controller); var svg8 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4 " ,1, { rotation: 900}); var sceneSvg8 = new ScrollScene({ duration: 1000, offset: 13000}) .setTween(svg8) .addTo(controller); var svg9 = TweenMax.to(".svg-1, .svg-4 " ,1, { left: "0%" }); var sceneSvg9 = new ScrollScene({ duration: 1000, offset: 16000}) .setTween(svg9) .addTo(controller); there has to be a more organized way of doing this...i have pages of code that looks like that lol.... also im not sure if all the repeated code is even neccesarry....some help would be greatly appreciated

Hi, I'm still new to GSAP and considering that I couldn't find anything helpful, I suppose that I'm missing something obvious. Basically, I have a timeline which I need to kill/clear, then rebuild it. The new tweens in the timeline have the same target as the old ones, although they might have different properties. This is the simplest demo of my problem: http://codepen.io/nyordanov/pen/gAcjI You will see that #test gets stuck. What is the correct way of doing this?

I have a function which draws lines using kinetic.js and canvas. I'm trying to find a certain argument from the function and write that argument to the console when I click on each line. How would I go about doing this? FYI, I'm trying to get the argument outside of the function. Kinetic function drawLine(name, points, fill, stroke, closed, strokeWidth){ window[name] = new Kinetic.Line({ points: points, fill: fill, stroke: stroke, closed: closed, strokeWidth: strokeWidth }); } drawLine("NST_R01", [938.4, 258.167, 868, 258.167], "", red, "", 3); The argument I want to get is the name argument.

Hi Thanks in advance for any responses. I am trying to figure out what is the best way to load a large image sequence (300 images representing a 3d movie) and control it using TimelineMax or simply staggerTo. I used to do these things super easy with Loadermax (loading the image list from XML) and tweening it. I have no idea how to do generate this array of images using javascript. Please help. Fernando.