Jump to content
GreenSock

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

Search the Community

Showing results for tags 'autoalpha'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

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


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 25 results

  1. GreenSock

    CSSPlugin

    With the help of the CSSPlugin, GSAP can animate almost any CSS-related property of DOM elements including the obvious things like width, height, margin, padding, top, left, and more plus more interesting things like transforms (rotation, scaleX, scaleY, skewX, skewY, x, y, rotationX, and rotationY), colors, opacity, and lots more. Because animating DOM elements in the browser is so common, GSAP automatically checks to see if the target is a DOM element and if it is (and you haven't already defined a "css" object in the vars parameter), the engine creates that css object for you and shift
  2. 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.
  3. 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
  4. 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!
  5. 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 ?
  6. 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?
  7. 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.
  8. 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
  9. 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)}
  10. 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
  11. 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.
  12. 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.
  13. 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; }
  14. 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
  15. 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
  16. 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
  17. 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});
  18. 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
  19. 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 p
  20. 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.
  21. 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
  22. 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.
  23. 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 pre
  24. 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 .
  25. 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.ptInf
×