Jump to content

Search the Community

Showing results for tags 'autoalpha'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 22 results

  1. I have an element that is by default set to opacity:0 and then first set to 0.5 and then to 1 via GSAP. When I use a label for the timing the element is not reset to 0 but to a random (?) number somewhere between 0.3 and 0.5. Does restart() not reset all parameters? Thanks!
  2. I can't get gsap's animation not to freeze/jump constantly on firefox if text is using background-clip:text, i included a codepen of the most simple of the animations that fail horribly on firefox ( works on chrome and opera ) anyone has some suggestions ?
  3. There seems to be a slight flicker once the animation is finished. This only seems to happen with HTML Videos. I was unable to reproduce the effect with other elements such as divs or imgs. Has anyone come across this issue before?
  4. My slider (see Codepen) has elements sliding in turn from left to right, with the previous slide fading out as the new one slides over. It works fine except when I pause it while the first slide is moving (the red box in the Codepen): if I then resume it the first slide immediately disappears. Resuming when the other boxes are moving works fine too. I guess one of the autoAlpha:0 properties is being applied in a way that I don't understand, but I would be grateful for any help with understanding why that's happening and how to fix.
  5. On my site, I am using a plugin inView, which calls a function when an element has come into view in the page. There is a div in the middle of the page, and i'd like to use this to fade in it and come from the bottom TweenMax.from(element, 1.5, { autoAlpha: 0, y: 100, ease:Expo.easeOut }) The thing is it works, however if I quickly scroll down to this div, I'll see it for a millisecond, a quick flash....and then the effect starts. I tried to use the .set function and set it to autoAlpha: 0...however now it doesn't even fade in at all. Is there a solution to this problem? I'd like to use .from, however I do not want to see it flash quickly on the page before it starts the animation.
  6. Hi, How do I set autoAlpha to many elements at the same time? I would like to fade out all the (.to ) together. the code is : tl.from(copy1, 1, {autoAlpha:0,ease:Power4.easeNone}) .from(hemma1, .1, {delay:0.6,autoAlpha:0,ease:Power0.easeNone}) .from(hemma2, .1, {autoAlpha:0,ease:SteppedEase.config(1)}) .from(hemma3, .1, {autoAlpha:0,ease:SteppedEase.config(1)}) .from(hemma4, .1, {autoAlpha:0,ease:SteppedEase.config(1)}) .from(system1, .1, {delay:0.5,autoAlpha:0,ease:SteppedEase.config(1)}) .from(system2, .1, {autoAlpha:0,ease:SteppedEase.config(1)}) .from(system3, .1, {autoAlpha:0,ease:SteppedEase.config(1)}) .from(system4, .1, {autoAlpha:0,ease:SteppedEase.config(1)}) .to(copy1, .5,{autoAlpha:0,ease:Power2.easeOut}) .to(hemma1,.5,{autoAlpha:0,ease:Power2.easeOut}) .to(hemma2,.5,{autoAlpha:0,ease:Power2.easeOut}) .to(hemma3,.5,{autoAlpha:0,ease:Power2.easeOut}) .to(hemma4,.5,{autoAlpha:0,ease:Power2.easeOut}) .to(system1,.5,{autoAlpha:0,ease:Power2.easeOut}) .to(system2,.5,{autoAlpha:0,ease:Power2.easeOut}) .to(system3,.5,{autoAlpha:0,ease:Power2.easeOut}) .to(system4,.5,{autoAlpha:0,ease:Power2.easeOut}) thanks
  7. I've noticed a strange behaviour when using autoAlpha on elements that have a z-index set. Is there any way to stop the fading in from interfering with the z-index? See CodePen http://codepen.io/friendlygiraffe/pen/EyYNbz
  8. Hey guys, I was wondering, is it possible to tween the body background image? I know you can on other divs (or I guess more precisely you tween the whole dom element) but with the body everything seems to tween BUT the background image. I've tried both opacity and autoAlpha, and any dom elements within the body tween fine, but the background image is visible on load. Any way to do this? If not, no biggy. I just wanted to keep my code cleaner and avoid having a fullscreen img tag hanging around in my HTML.
  9. I'm trying to do an autoalpha switch with a navigation. To prevent the page from getting too crowded, I'm tweening autoalpha for the appropriate content when the nav element is clicked. I've created a loop to create the timelines and listeners, and then calling the timelines on the appropriate "titles" click. Right now, the tween works if you click the titles once each, but if you try to switch back and forth, the timelines are no longer tweening.
  10. I've been building a website with Bootstrap3, and I decided I wanted to tween some divs to break up one of the pages. I tried the following to tween the display of the divs, but nothing seems to work. I also tried using .invisible (see below) and tweening visibility, but that did not work either. Bootstrap classes .hidden { display: none !important; } .invisible { visibility: hidden; }
  11. You have helped me before, so please indulge me.I know you have answed related topics before but here is a very simple codepen. In the live program I have images instead of text. In chrome and firefox I have no problem, but IE 11 doesn't fade. Also it I use .set($lines,{opacity:0}) this does not work in IE. Thanks
  12. 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/
  13. 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
  14. 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!
  15. Hi I am having a problem with a movieClip flickering when using a from autoAlpha function TweenMax.from(mc), 3, {autoAlpha:0}); This works fine when publishing a preview, but when a standalone is created, you get a flicker of the mc at full visibility. Is there any way round this? I don't want to have to physically set the alpha to 0 using the properties panel then fade it in to autoAlpha:1 Thanks
  16. Pavel

    Changes in autoAlpha

    Hello! From 1.10.1 there is this change - Altered autoAlpha behavior in CSSPlugin so that instead of explicitly setting visibility to "visible" when opacity isn't zero, it now sets it to "inherit" so that behaves more intuitively when it has an ancestor whose visibility is "hidden" (the descendent should honor that) I use patched SplitTextPlugin for implode effect to show letters in the center of page. They assemble together. There is solid text in the center of screen with visibility: hidden or opacity: 0 (it does not matter). At the first it is divided into single letters. then i put random screen coordinates to TimeLineMax and start "fromTo" method. I also add autoAlpha value to 1 to see letters pn screen. Before 1.10.1 there were no problems. Now visibility is inherit and i don't know how to fix it. IMHO there is not a good idea to change visibility to "inherit" because there is need to show objects (text for example) from 0 to max by autoAlpha. You can see this effect with old version of TweenMax at my website. http://musicworld.in.ua
  17. Hi, I'm looking for animation similar on this video http://www.youtube.com/watch?v=pQT4JYUUDJc if possible. As a beginner I tried using while loop and tween my Array of stars. My approach was insert multiple tween and use different delay on each one to make it random, but insert is not working in loop and if I use add they twinkle one by one. To make it more random I made 16 different Arrays with same stars, but again result was too uniform. Is is any chance to twinkle whole array randomly and multiple stars at ones similar to video above? I'm sorry for my code, it is not very nice. I'm not programer and I'm using Tween for fun. It is nice tool to make AS animation easy even for me. Here is my code: var arr01:Array=[s070,s066,s047,s029,s015,s101,s119,s134,s149,s160]; var arr02:Array=[s083,s058,s040,s024,s011,s108,s125,s127,s145,s154]; var arr03:Array=[s076,s062,s050,s036,s019,s001,s085,s106,s124,s155]; var arr04:Array=[s073,s082,s045,s032,s021,s006,s110,s140,s135,s159]; var arr05:Array=[s075,s061,s060,s044,s012,s005,s095,s118,s138,s152]; var arr06:Array=[s080,s088,s052,s041,s027,s002,s111,s139,s136,s161]; var arr07:Array=[s071,s084,s048,s030,s017,s009,s097,s115,s129,s150,s053]; var arr08:Array=[s072,s065,s038,s025,s003,s092,s104,s123,s117,s147]; var arr09:Array=[s079,s054,s037,s120,s007,s091,s102,s122,s133,s144]; randomBlinkBt.addEventListener(MouseEvent.CLICK, randomBlink); //randomized array function shuffleArray(arr:Array):Array { var arrShuff:Array=[]; while (arr.length > 0) { arrShuff.push(arr.splice(Math.round(Math.random() * (arr.length - 1)), 1)[0]); } return arrShuff; } //random Twinkle array function randomBlink(ev:MouseEvent):void { arr01=shuffleArray(arr01); var blinkTime:Number=0.5; var timeLineBlink:TimelineMax = new TimelineMax(); var i:int=arr01.length; while (--i > -1) { timeLineBlink.add(TweenMax.to(arr01[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr02[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr03[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr04[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr05[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr06[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr07[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr08[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); timeLineBlink.add(TweenMax.to(arr09[i], 0.5, {alpha:0, yoyo:true, repeat:1}) ); } } Any help or point to right direction help. Thank you
  18. I have a grid of thumbnails (6 columns / 5 rows) that I'm animating on load and resize. On load the columns stagger from left to right into the page. On resize the rows stagger down off the page, and then the columns re-enter from left to right. The number of columns, rows, tn size and position are based on window width and aspect ratio. I'm using autoAlpha to hide/reveal column 6 and row 5. The code/conditions for the rows are working as expected. The problem I'm having is with column 6 on "resize only". 6 cols if window width >1200px 5 cols if window width <= 1200px If 6 cols enter on "load" everything works always as expected. When resizing ww <=1200px, grid exits down, then 5 cols re-enter from left (col 6 hidden). Then if you resize ww >1200px, grid exits down, then 6 cols re-enter from left. Everything works fine no matter how many times the ww is resized. If 5 cols enter on "load" there is a problem with col 6 on "resize". When resizing ww >1200px, grid exits down, then col 6 becomes immediately visible in it's end "x" position (farthest right) and the remaining 5 cols re-enter from left. Column 6 should become visible "but" positioned off the page to left, then stagger in with the other 5 cols. My thinking is the autoAlpha event is firing before being positioned, even though it is called within the positioning function. I have tried putting autoAlpha at the end of a TimelineLite timeline, used a positive position offset, etc, mostly with worse results. I have also tried staggerTo using an x start position -(ww+500). They position and size correctly but for some reason they don't enter into the page using a variable ie: "+=ww+500" but it does work with just a number within the string "+=1400". If I use the staggerTo method I can't use a fixed number if I use a variable for the starting negative offset. If I do use a fixed number that will insure that the grid clears all different window widths ie: -3000px, the entrance speed won't be consistent across different window widths. I've uploaded copies of the files (the tn images have been replaced with solid colored jpgs) http://www.peterdavidian.com/gsap/staggerFrom.html I've searched the JS forums but couldn't find a post with a solution. It's been days now (really almost a week) and I need someones help! Thank you, Peter My functions: dLoad: sizes and positions the grid container tSz: sizes the tn's tPos: sizes and positions the number of cols and rows tEnterR: staggers the cols in from left tExitD: staggers the rows down, then calls tReEnterR tReEnterR: calls tSz and tPos then staggers cols in from left
  19. Currently I'm attempting to use autoalpha on a div containing text but have found that once the tween has completed the text doesn't have any aliasing applied to it. Is there any way to fix this? Do I have to remove the filtering completely somehow? I'm currently testing in IE8, as it works fine in Firefox and Safari. Thanks in advance.
  20. Hello, I'm tweening the autoAlpha of a PNG24 image, but a gray background is appearing around it, in the area that should be transparent. I set it's "visibility:hidden" in the CSS. Then I use Javascript to find out if it's visible in the browser while scrolling. When it is in the viewable area, I tween it to autoAlpha = 1, and in the end of the tween I remove the listener. Basically, this is to implement the effect of showing images only when the user scrolls down to them. But strangely, that gray background is being created. Am I doing something wrong? Is there a technique to prevent this? I attached the troublesome image to this post so you can see it. Thanks
  21. as we all konw,autoalpha can tween alpha and visible.i have code as follows import com.greensock.TweenMax; import com.greensock.easing.*; mc.visible=false mc.alpha=0 TweenMax.from(mc, 1, {autoAlpha:0,y:400}) but seems not work.if i remove mc.visible=false mc.alpha=0 it works and tween alpha from 0 to 1 if i use tweenmax.to function it works well .
  22. I'm still learning and searched but didn't find my issue. I'm not sure if this is coder error or not possible... I'm very familiar with the AS3 version of TweenMax/Lite but still learning JS/GSAP/etc. I used Flash CS6 to layout my and create my objects. I've successfully integrated GSAP for the tweening engine but autoAlpha is not working for me. Basically I want to use autoAlpha on an object. Here is the newly created object in my .js file (code simplified to highlight issue): (lib.map5 = function() { this.initialize(); // popups this.ptInfo_A = new lib.ptInfo_A(); this.ptInfo_A.setTransform(176.5,141.5,1,1,0,0,0,134.5,73.5); this.addChild(this.ptInfo_A); }).prototype = p = new cjs.Container(); p.nominalBounds = new cjs.Rectangle(42,68,469,201.5); In another JS file, where I setup interactions and initial stage properties, I'm trying to do this but it's simply not working: TweenLite.to(exportRoot.ptInfo_A, .2,{{css:{autoAlpha:0}}}); I've been able to "manually" make the object do what I want it to do but it seem clunky using anonymous funcions: TweenLite.to(exportRoot.ptInfo_A, .2, {alpha:0, onComplete:function(){exportRoot.removeChild(exportRoot.ptInfo_A);}}); Does anyone have any insight into this? Is autoAlpha not possible on objects? Thanks in advance! (I've attached the files if anyone if feeling especially ambitious to help!) map5_deploy.zip