Jump to content

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

Search the Community

Showing results for tags 'opacity'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. 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!
  2. 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 !
  3. 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?
  4. 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!
  5. 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?
  6. 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
  7. 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]
  8. 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.
  9. 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);
  10. 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
  11. 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
  12. 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
  13. 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.
  14. I new to the GSJS and I am trying to tween the opacity of a div that as text in it. I have not been able to get the text to change with any css changes. Here is a sample of my code below. Could anyone tell me what I am doing wrong. Thanks. function init() { var title = document.getElementById("logoTitle"); var logoBar = document.getElementById("logoBar"); var subTitle = document.getElementById("subTitle"); var logoNumber = document.getElementById("logoNumber"); var nav1 = document.getElementById("s1navOne"); var nav2 = document.getElementById("s1navTwo"); var nav3 = document.getElementById("s1navThree"); var nav4 = document.getElementById("s1navFour"); var nav5 = document.getElementById("s1navFive"); var mainInfo = document.getElementById("mainInfo"); var logoTL = new TimelineMax({delay:.4}); logoTL.from(logoBar, .5, {css:{transformOrigin:"bottom", scaleY:"10"}, ease:Sine.easeOut}) logoTL.from(title, .5, {css:{alpha:0, marginLeft:"-50px"}, ease:Back.easeOut}, -.3) logoTL.from(subTitle, .5, {css:{alpha:0, left:"50px"}, ease:Back.easeOut}, -.3) logoTL.from(logoNumber, .5, {css:{alpha:0, marginTop:"20px"}, ease:Back.easeOut}, -.3) logoTL.from(nav1, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.3) logoTL.from(nav2, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.from(nav3, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.from(nav4, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.from(nav5, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4) logoTL.to(mainInfo, 1, {css:{alpha:0}}) <div id="mainInfo">This is the text I have</div>
  15. Hi all, I'm in my first JS GSAP project and I've just discovered what seems to be a long standing issue with Javascript: fading in elements after the page has loaded, causing a "flicker" before they're able to start in their opacity:0; state. I have my elements starting at opacity:0; in my CSS and in my JS, I'm using TweenMax.from to {css:{autoAlpha:0}. What's the best practice here to prevent that flicker? Any good workarounds specifically using GSAP correctly for a simple fade in? Thanks as always!