Search the Community

Hello, If I use force3D: false to fix safari bug, it solves the issue and the SVG looks sharp. But If I use autoAlpha: 0 with force3D: false, the SVG looks blurry. I did not find any solutions on this forum regarding this issue. Could you tell me how I can fix the issue? Best Regards, Anis

gsap.to(target, {duration: 0.3, autoAlpha: 0}); The expected behavior is that visibility will be set to hidden, but as you can see in this pen (see console) when you click the target (red div) the visibility is set to inherit. And because the target is still visible it's still clickable, so when it's clicked again, then the visibility is set to hidden. I suspect this is a bug. With GSAP 2 the visibility is correctly set to hidden.

I'm following a tutorial on YouTube and almost got to the end when I ran into an odd problem. When I scroll my page, the images should fade in from opacity 0 to opacity 1. But for some reason, my images don't fade in at all. They stay at visibility: hidden for some reason and I have no idea why. From what I can tell from the tutorial, I should see the images being set from opacity:0 to opacity: 1 when I scroll, but they stay at visibility: hidden and opacity: 0. I have a feeling I'm missing something, but I'm not quite sure what it is. I attempted to repeat this problem on Codepen to see if maybe it was something I was running in VS Code that was causing the error, but wasn't able to repeat the problem in Codepen. Actually now, my images don't fade in or out at all in Codepen. Not really sure what's going on with my code at this point. Here's the code I currently have - I'm new to GSAP so I'm not really sure what it is that I'm missing to make the images fade in and out on scroll correctly. I have a feeling it's something simple and I'm just not seeing it. Thanks for the help! YouTube tutorial I was following - (I got stuck at 14:23)

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!

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 ?

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?

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.

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.

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

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

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.

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.

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; }

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

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/

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

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 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

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

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

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

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.

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

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 .