Search the Community
Showing results for tags 'alpha'.
Found 14 results
-
This is driving me mad, I have a simple Timeline, that works pretty well, except for some reason after I fade a MC out, I want to fade it back in later in animation/timeline and it just won't animate, instead it just appears/jumps back straight to 100%. I'm lost on why it wont or how to fix it. (or what even to search for in terms of reanimating the same thing later in the TL/ var til = new TimelineLite(); // til.to(this.WB01, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 1.5) .to(this.Logo, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 2) .to(this.WB02, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 2) .to(this.WB03, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 2.8) .from(this.Logo_Final, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, 6) .to(this.WB02, 1.00, {alpha:100, ease: Sine.easeInOut, overwrite: false}, 6) // - this is the line .from(this.CTA, 1.00, {alpha:0, ease: Sine.easeInOut, overwrite: false}, "-=0.5") Any help or a push in the right direction would be much appreciated. -
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.
-
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 Forum- This is my first post. I am trying to tint a MovieClip using greensock, but it appears that the tint is ALL or NOTHING. (which is weird, because there appears to be alpha as the tint is animating. Is there an alpha control for the tint only? I am trying to tween buttons from 50% tint when inactive to no tint when the button is rolled over. Please, let me know if there is a way to do this. Thanks! Joel
-
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.
-
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, I am trying to increase the strength of the glow effect. I am using the following code: TweenMax.to(mc, 0.3, {glowFilter:{color:0xFFFFFF, alpha:1, blurX:30, blurY:30}}); I am not looking forward to increase the blur radius just trying to achieve a heavier glow especially around the movieclip. Is it possible somehow? I have tried increasing the "alpha" value but it doesn't work above the max value 1. My only other possible option would be to stack another glowFilter tween on the same movieclip but it may result in performance problems. Thanks, Attila -
Hey guys so im having a little trouble here. So i have a textField that updates after each hitTest which is called levelText. So what im trying to accomplish is the levelText field to fade out after 1 second at the start of each new level. It works fine for the first level but when i go to level 2 or 3 the text field doesnt appear at all. I believe i have to destroy it and re add somehow? Here is the code im using. private function startNextLevel():void { TweenLite.to(levelText, 1, {autoAlpha:0}); } Please any information would help. Thank you.
-
Hi, I'm already using TweenMax for other things on my project so I just thought I'd see if I could use it for this too. I'm wondering if it's possible through the colorMatrixFilter or colorTransform to selectively tint only a certain color range/selection? I'm asking this because I have a dithered (solid black and white) image I am trying to tint, and we only want to tint the black part of the image, leaving the white pixels white. I couldn't figure any way to do it looking at the examples. Basically, I want to find all of the solid black pixels and change them to the selected color, while leaving the white pixels alone. This feature works using the colorTransform IF the image is black with the other areas have alpha transparancy, but doesn't work if the image has white instead of alpha. So, I'm almost suspecting I'm going to have to do some kind of a selection mask for the color transform, but wanted to ask here in case there was an easier way to do it. Attached is an example of how the original B&W image looks and how I want the colorized image to look. I can achieve this effect with a Color Fill : Blend Mode: Color Dodge filter in Adobe Fireworks.
-
Im new to all this and im sure what im after is very simple so can anyone help? I want a movieclips alpha to tween into alpha:1 stay like that for say 5 seconds and then tween back out to alpha:0 again. Can this be done in tweenlite? or do i need one of the other tweening platforms?
-
I am trying to make a flash that has twinkling stars. I thought it would be a simple effect. All I want is the alpha to fade in and out on a randomly generated cycle. And have the AS inside the star so every time I place one it will fade in and out on its own. var cycle:Number = Math.random() * 4; TweenLite.To(mc, cycle, {alpha:0, repeat:-1, yoyo:true}); But I am missing something because it will appear and fade out and not repeat or yoyo. Thanks cH
-
Hi all! First off thanks for everything...! So... I have created a "Player" class which extends MovieClip and contains an array of F4V files being loaded via LoaderMax.parse ... In my Main Document Class (Main) I want to transform properties of the entire Player class (alpha, scale, etc.) however the F4V does not see the transformations....It seems I have to reference the content directly within the Main class. For example, if i simply try to set player.visible=false, after i've already added video content to the stage, It does not stick, but if I reference player.video.content.visible=false, it works... What I'm really trying to do is fade the player object out before I navigate back to a main navigation screen. I can fade each video.content individually but I'd rather just write one tween that effects the whole class. Am I missing something simple or is this larger than I think? ...additionally, these transformations DO work with NetStream driving the f4vs. But looping w netStream is ugly , as we know. Thanks! -
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!
-
If I use LoaderMax to load pngs with transparent backgrounds and add mouse event listeners to the pngs, will the listeners respond when the mouse is over the transparent portion of the png? If so, is there a way to change this so that the mouse events only dispatch when hovering over opaque portions of the png? Thank you
