Search the Community

Hi , I am trying fade in fadeout animation using greensock I am using these funcitons for hiding and showing images TweenMax.to("#image_" + id, 2, { display: "block", opacity: 0.99, ease: Power4.easeOut }); TweenMax.to("#image_" + id, 2, { display: "none", opacity: 0 }); It is working in all browsers , but when it comes to IE8 after 2 seconds images are hiding but I opacity is not getting changed. I am using latest CSSPlugin available from green sock. Any help regarding this would be appreciated. Thanks in advance. This is not working in IE8 windows 7 machine http://codepen.io/jonathan/pen/iHdek.

Hello! I am new to GSAP but though I read the beginning documentation and watched the getting started video, my first attempt at learning GSAP is not going well. I'm not certain how to even begin with it, but going to be giving it a shot! My HTML: <div class="section"> <h3>Section 1</h3> <p>There's some text and what not in this section.</p> <div class="editMenu"> <ul class="editList"> <li><a href="#">Edit</a></li> <li><a href="#">Remove</a></li> </ul> </div><!-- /editMenu --> </div><!-- /section --> My script: $(document).ready(function () { //hover over Section, make editMenu opacity = 1, scale = 1 //on mouseOut, make editMenu opacity = 1, scale = .7 $(".section").hover(function () { var editMenu = $(this).find(".editmenu"); TweenMax.to(editMenu, 0.2, { css: { opacity: 1 } }); }, function(){ var editMenu = $(this).find(".editmenu"); TweenMax.to(editMenu, 0.2, { css: { opacity: 0 } }); } ); }); The CSS I am somehow assuming is screwing things up: .editMenu{ position: absolute; top: 10px; right: 5px; opacity: 0; transform: scale(.7); } I'm assuming I'm missing something simple! Thank you for any help.

I've got a list of items. Filters are clickable that hide all but the items in that category with a sequence that fade opacity and height to 0. When showing all, items currently at opacity and height 0, fade in correctly, but height "pops" in immediately. Am I missing something obvious here? Also, is there a more appropriate place to post than here? SO perhaps?

Hi, Is it possible to check the current alpha of an element in GSAP? In other words I have a button that when clicked it changes the alpha of an element to .5 and I would like to be able to toggle the alpha from 1 to .5. Something like... function clickEvent{ if(alpha == .5){ TweenLite.to(".someElement", 1, {alpha: 1}); }else{ TweenLite.to(".someElement", 1, {alpha: .5}); } } How is this typically done? Does GSAP has some property to check the opacity of an element or it needs to be done in pure Javascript? Thanks a lot.

Hey Everyone, I'm working on a site that has some fairly light scroll-triggered animations(basic fade in and fade up). Everything works as expected - animations are triggered at the right time, everything looks good - except that the first time the animation is triggered, there is a slight lag/delay. It's fairly noticeable and I've tried what I can to smooth it out the first time(force3D, setting different props, etc). Everything is smooth and performant the second time the animation runs, but the first is the most important. Seems like something gets cached and allows the animation to run smoother after first time or something. Any ideas? Here's a test link. Scroll down to the 'work' section. http://sanghanco.surge.sh/

Hello, I'm working with SplitText and can't seem to get the opacity to work. I have it set to 0 in the CSS and then tween it to 1 in the code but it doesn't work. Any idea why? Also, I can't get the animation running on codepen like I can on my PC. Maybe I'm missing a file or something, but it isn't tweening. Thanks, -Stefan

I'm currently building an animated banner using Canvas. I've got coloured SVG dot graphics set as Image() objects on my canvas. I've been animating the dots on the canvas along x,y paths and I'd like the dots to fade out by the end of their animations... I can't seem to figure out how to animate opacity values in canvas using TweenLite... In fact, I'm not even sure how to animate opacity on the dots at all, even through plain JavaScript.. I haven't been able to find any answers on Google.. Does anyone here know how to achieve this desired effect? (preferably using TweenLite) For context sake, here is a small snippet of the code I'm currently working with: function drawDot() { ctx.drawImage(orDt, orDtObj.x, orDtObj.y); //draw an orange dot in the canvas } function reAnimateDot() //set dot back to it's origin { orDtObj.x = xDotOgn; orDtObj.y = yDotOgn; animateDot(); } function animateDot() { var angle = Math.random()*(Math.PI*2); console.log('>> the angle : '+angle) var radius = 100; //find the end point for our dot var xEnd = orDtObj.x + radius * Math.cos( angle ); var yEnd = orDtObj.y + radius * Math.sin( angle ) ; orDtObj.xEnd = xEnd; orDtObj.yEnd = yEnd; //reDrawUnit is a function that redraws everything during animation (refresh/frame-rate function) TweenLite.to(orDtObj, 2, {x:orDtObj.xEnd, y:orDtObj.yEnd, autoAlpha:0, ease:Quad.easeOut, onUpdate:reDrawUnit, onComplete:reAnimateDot}); }

Hello everyone, Im trying to generate particles in HTML5 canvas and then fade them in or out with random delay and animation duration time. Ultimately creating the effect of stars appears in the sky. So far i've been able to generate the particles with rgba() colour but was unable to animate the alpha value. In the Codepen provided if you change line 18 from _this.alpha = 0; to _this.alpha = 1; you will see that the particles are actually being drawn on the canvas. Im not sure if i can modify directly an rgba value of a canvas shape with TweenMax or i need another approach. My animate function looks like that: function animate(){ for(var i = 0; i < bubbles.length; i++){ var current = bubbles[i]; var newAlpha = i * 0.1 % 1; // TweenMax.to(current, 1, { color: 'rgba('+ current.color + ', '+ newAlpha +')', delay: 0.5, onComplete: function(){ console.log('Completed!'); } }); } loop(); } and i have the loop function to redraw the canvas on every frame: function loop(){ for (var i = 0; i < bubbles.length; i++) { bubbles[i].draw(ctx); } requestAnimationFrame(loop); } Im not sure if im doing the requestAnimationPart properly as well. CodePen: http://codepen.io/MomchilGorchev/pen/mJBBvE Any advice will be much appreciated! Thanks!

Hello in the given pen i want to achieve : 1) Only the elements inside the circle area to be visible with ease effect of gsap.i.e on increasing the radius they must appear onto screen via gsap and on decreasing similarly should disappear 2) the elements to appear or disappear should be draggable with the container as the max limit of circle. 3) the elements should be clickable. 4) the circle opacity should be reversed i.e right now it is rgba(0,0,0,0.8) inside the circle i want it to be outside the circle so as to give the selection effect waiting for help. Thank you

Hi, I'm really new to all this and this is my second post. I'm trying to do something I thought was simple, but something does not work. I have two div (#red and #blue) and two buttons (#opacity1 and #opacity2), clicking the first button will increase the opacity of the first div while decreasing the opacity of the second div and vice versa. The code I'm using doesn't seems to work, can someone help? Thanks UPDATE: There's an error in the code, sorry!!! .to("#blue", 0.1, { opcity: "+=0.1" }, "0"); should be .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); (opacity instead of opcity) and now seems to works. Anyway, am I doing this correctly? or there is a better way? Thanks. $('#opacity1').click(function() { var tl1 = new TimelineMax(); tl1.to("#red", 0.1, {opacity: "-=0.1" }, "0") .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); }); $('#opacity2').click(function() { var tl2 = new TimelineMax(); tl2.to("#red", 0.1, {opacity: "+=0.1" }, "0") .to("#blue", 0.1, { opacity: "-=0.1" }, "0"); });

Hi, i am using scrollmagic but i hope someone here can help me i tried to pin a section which contains an image which gets fadeIn while scrolling. This works fine, but when i scrollUp, the image changes its opacity a couple of times very fast. testet in lastet chrome thanks for any advise or help

Sorry for not making a codepen, but my question is so pathetically simple I think it's unnecessary. The following works. (Obviously, it's just supposed to flash the two classes on and off in alternation.) But it doesn't work without the first (or last) two lines of code. Why not? I see redundancy here, and would like to refactor this properly. var foiled_crook = new TimelineMax({repeat:-1}); foiled_crook .set($('.crook'), {autoAlpha:"1"}) .set($('.crook-blocked'), {autoAlpha:"0"}) .add("foiled", "+=2") .set($('.crook'), {autoAlpha:"0"}, "foiled") .set($('.crook-blocked'), {autoAlpha:"1"}, "foiled") .add("trying", "+=2") .set($('.crook'), {autoAlpha:"1"}, "trying") .set($('.crook-blocked'), {autoAlpha:"0"}, "trying") ; Thanks, eh.

I'm working on an assignment at the moment and having an issue with AutoAlpha. Link: http://johncashin.net/test_sites/marc_comic_2/ In the 2nd and 4th frames, I want to have some elements fading in, however the elements just switch from invisible to visible pretty much instantly. The code I am using on the animation is as follows: var anim0 = function() { TweenLite.set("#popup0",0,{Alpha:0, display:'hidden'}); TweenLite.to("#popup0",2, {Alpha:1, display:'block'}); } var anim3 = function() { TweenMax.set("#popup3",0,{autoAlpha:0}); TweenMax.to("#popup3",2,{autoAlpha:1, delay:2}); } And neither of them are "fading" the opacity. Is there something I am missing? Thanks in advance anyone who takes a look!

Hi ! I have been working on a full SVG animation with TweenMax. It was a pleasure as everything works really really well with the great addition of cross browser transform origin. Thanks ! I just noted one thing that you might be able to adjust for future releases. At first, I was using opacity attribute to tween elements opacity. It worked with <g></g>, <path />, <rect />, quite everything. But not on ios... On ios, if you tween opacity and you move the element using x property, it creates a glitch. I couldn't find a way to make it behave correctly. I dig around a little, and the only way I could manage to use opacity for now has been by creating a tween using attr: {'fill-opacity': 0.5} or attr: {'stroke-opacity': 0.5}, and by being sure that the property was set before tweening it (using TweenMax.set did the trick). The big downside of that technique is that you can't tween group (<g></g>) opacity, and for tweening the global opacity of an object, you have to tween the stroke and the fill. The codepen attached shows three ways of tweening the opacity. Chrome handle the three ways perfectly, but ios and firefox not. Please have a look. I hope you'll have an idea of a better way to use this. Have a nice day !

I've been working on learning GSAP in anticipation of doing some banners. The basic idea is to hide all text boxes, then sequentially Tween their opacity and position with some Easing effects. Here's a small example: <div style="width:750px; height:90px"> <div class="box" id="first"><p>some text here</p> </div> <div class="box" id="second"><p>some text here</p> </div> <div class="box" id="third"><p>some text here</p> </div> The CSS2 method of hiding elements was either: .box { display:none: } or .box { visibility:hidden; } For CSS3 (and GSAP), I've found that I have to use (the second line being for IE8 browsers): .box { opacity:0; filter: Alpha(opacity=0); } And then just tween away to make them visible. But it occurs to me that there must be a "standard" way of hiding text box elements in order to animate them into position from their initial -invisible - starting positions. Would the best method be to just set overflow to hidden, and then position the "idle" boxes outside of the containing div, i.e. : .box { overflow:hidden; position:absolute; top:-200px; } In short, how are elements initially positioned "off the stage" so that they can be Tweened into position and displayed?

I'm converting another Flash movie. This one has 16 buttons, each targeting a unique text box. When the user clicks on a button, it changes the text that appears in an adjacent area. In the Flash version, this was done with layers and moving around on the Timeline. No problem figuring out the onclick actions. But how to handle the "stack" of text boxes? 1.) When the page opens, the default text box is in place. When the user clicks a button, it's easy to change the zIndex, or the opacity, or even the show/hide properties. But, when the click occurs, this is what has to happen: 1.) The selected layer is "activated," either by changing its opacity to 1, or bringing it to the top of the "stack" with zIndex. The text box appears. BUT, simultaneously, the text box that was at the top of the stack must be "deactivated." 2.) The box at the "top of the stack" at any time could be any one of those 16 different boxes. Obviously, it must now "go away," by hiding it, or changing its opacity to 0, or sending it to the bottom of the "stack" with a lower zIndex number. Easy to "activate" a box, but not so easy to send away the one that's currently visible when the click occurs. Since it will always be a different box, I can't see a way to target it. I would think that when the selected text box loads, it has to somehow automatically become a variable that could be addressed later. But this is above my jQuery knowledge level... can someone point me in the right direction? TIA!

In the example codepen I have two divs overlapping each other. During the tweenLite activity the first div fades out and at the end needs to fade back in. It appears that it's opacity seems to remain at 0. In otherwords, the div with the button should reappear. Does anyone have a solution?

Hi all! I need help with this, I have tested in Chrome, Safari, Firefox, and IE9+ and works magically. But when I tested in IE8 specifically, the animation breaks. I have tried everything I could came up with but I'm stocked. Demo Link: http://theoremcreations.com/undertone/16002/ss/demo/ CodePen Link: http://codepen.io/anon/pen/lnIHg Animation_Demo.zip

hello all, I am learning GSAP with the GSAP tutorial book I purchased from Nobledesktop, so far so good but I am running into an issue in one of the exercise. Basically, using TweenLite.from, the opacity of the target still visible for fraction of a sec before the animation starts, I want to fix it so that when the animation runs, the target is not visible, as intended by using TweenLite.from. I did a search and saw a thread that suggest using TweenLite.render(), but that didnt help me. Below is the HTML (I added the zip file for the exercise): <!DOCTYPE html> <html> <head> <title>2D Transforms</title> <style type="text/css"> body { background-color:#041218; color: white; } .panel { position: relative; background: url(img/gradient-bg.jpg); width: 700px; height: 400px; margin:50px auto 0 auto; overflow: hidden; } .clapper { position: absolute; width: 295px; height: 225px; left: 32px; top: 105px; } .clapper-top { position: absolute; } .clapper-bottom { position: absolute; top: 30px; } .panel h3 { position: absolute; left: 350px; top: 100px; font-size: 60px; font-family: Arial, Verdana, Helvetica, sans-serif; display: inline-block; } </style> </head> <body> <div class="panel"> <div class="clapper"> <img class="clapper-top" src="img/clapper-top.png"> <img class="clapper-bottom" src="img/clapper-bottom.png"> </div> <h3>ACTION!</h3> </div> <!-- load scripts after dom has been rendered --> <script src="js/gsap/TweenLite.js"></script> <script src="js/gsap/plugins/CSSPlugin.js"></script> <script src="js/gsap/easing/EasePack.js"></script> <script src="js/jquery/jquery-1.9.1.min.js"></script> <script> var $clapperTop = $(".clapper-top"); $action = $(".panel h3"); TweenLite.to($clapperTop, 0.5, {rotation:-20, transformOrigin:"15px 15px", ease:Power4.easeIn}); TweenLite.to($clapperTop, 0.1, {rotation:0, ease:Power4.easeIn, delay:1}); TweenLite.from($action, 0.2, {opacity:0, scale:0, ease:Bounce.easeOut, delay:1.1}); TweenLite.to($action, 0.5, {skewX:-45, left:750, ease:Back.easeIn, delay:1.5}); // this didnt help TweenLite.render(); </script> </body> </html> Any help will be greatly appreciated, thanks. [edit : attachment removed by admin]

Ok, I don't know this is a GreenSock bug or not but this happens a lot. When tweening the opacity of several divs and/or images at the same time, sometimes some divs/images disappear while- or after the tweening is done. The solution is very simple, instead of tweening the opacity to the value of '1', I use a value of '0.99'. And everything is working fine again. I found out this a solution for Firefox and FireFox Android. I don't if there are more browser with the same problem out there, but this might help.

I am trying to do a rapid cross-fade slideshow (a sort of timelapse effect) and it works as expected so far, but the amount/speed of the images (~300 images @ 2 images/second) that are being loaded are slowing other animations down. Since the opacity is being adjusted down to a very fine level, I figured rounding the number would help the many calls that are happening. I found the roundProps feature and it works as intended, except it becomes pointless when dealing with opacity (will jump straight from 1 to 0). TweenMax.to(obj, 0.5, {autoAlpha:0, roundProps:["opacity"]}); Is there anyway to round to the nearest tenth or hundredth? ... On a similar note, is there any way to adjust the frame rate on an individual timeline? This will change all of the timelines' frame rates: TweenLite.ticker.fps(20); but doesn't work when I try something like: myTimeline.ticker.fps(20);

Hi, I'm trying to create a similar website to http://www.nouvelleoctavia.fr whereby as you scroll the content and imagery increase in size, fade in and fade out as if you are passing through it. I'm a newbie to GreenSock and I am having trouble understanding how it works. I'm currently trying to get a simple coloured div rectangle that is in the centre of the screen to increase and "pass through" as I scroll but it is not working. Any help would be most appreciated in getting me started. Thanks

Hey All, I'm pretty new to these tools, only been working with them for about a week and I'm VERY impressed -- Great work! I'm using the tools to assist me in building a mobile app and they are performing delightfully with phonegap on both iOS and Android devices. Kudos. I am wondering if there's an easy (or at least highly performant) way in which to cause a "Draggable" item (in my situation, basically a div/box on the screen) to change it's opacity/alpha based upon how far away it gets from the "bounds" it's located within? Basically, I want the user to be aware that moving the box a certain amount will dismiss it and remove it by fading the box out more and more as it moves away (and I'd want to fade it back in if it returns), but I haven't found a great way to do this yet. Any help/thoughts would be greatly appreciated -- Thank you! -Flinn

Hi, First - thanks so much for making this javascript framework! I've been trying to get an animation going in IE7/8 that I got to work on all other browsers using your framework, but it doesn't function properly in those browsers. You can see it in action here: http://neu14.com/transitions/print/index2.html I'm also attaching my files -> see index2.html (that one uses greensock). Thanks for any thoughts! Pol PS: I'm unclear if I need the CSS plugin for rotation or opacity or not since they both can be numeric? (I used it, but not sure if it was needed) animation.zip

I found a 'bug'. In case two divs are placed on top of each other and the opacity of both is animated, text in the upper div will dissapear when the tween is completed. I tested this 'bug' in serveral browser and effect was the same overall. The workaround is to set the opacity to '0.99' instead of '1': new TweenLite(myText, 2, {css:{opacity:0.99}, delay:3}); PS. In the bottom div contained a image, the upper div is only text.