Jump to content
GreenSock

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

Search the Community

Showing results for tags 'opacity'.



More search options

  • 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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 42 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 shifts any properties that aren't reserved (like onComplete, ease, delay, etc. or plugin keywords like scrollTo, morphSVG, pixi, etc.) into that css object when the tween renders for the first time. We recommend using the more concise style that omits the css:{} object but be aware that either style is acceptable. Learn more in the CSSPlugin documentation.
  2. Hi there! I've been hassling with this issue for a few days now and I can't come to an understanding of why this won't work. So as you see there is a menu that slides out on click of a button and slides back in when it's clicked again. Now I'd like to give the right pane of the menu a different background color which appears just after the menu slides out. When the menu slides back in, the right pane should reset and when the menu is slided out again, appear when the slide-out animation is complete. You get the idea I hope. I've tried putting the two tweens in a timeline together, but then the sliding animation of the menu won't work anymore. Am I just totally missing a point or am I making things difficult for myself? I would love to hear your ideas! ~ David
  3. Hello, I have a problem not related to GSAP, I don't find any solution, I asked on 3 forums (+stackoverflow) and didn't find any answer. I already used GSAP on my webpage for a small animation and I was wondering if it could help me with this problem or if it would be overkill to use GSAP (performance/ressources). I tried to document my problem on stackoverflow (if someone want to read more details) : https://stackoverflow.com/questions/57784926/why-using-opacity-or-an-absolute-position-ruin-my-transform-rotatey180deg I made a card that can rotate on Y when it's mouse hovered (everything with CSS). the problem is that when I use css to change the opacity (svg flag) or the position of an element (text in my situation) on the back of the card, the rotate animation is buggy and got a delay of +/-1sec to display the back of the card. /!\ the bug occur only once, the first time the rotateY is used; to do it again, you need to reload the page (F5). The bug only apear in Chrome (work perfectly on firefox). If I use GSAP to do the rotation instead of css, should it fix the problem or is the problem from chrome and would still be here with GSAP ? (what would be more logic using GSAP for the rotation on Y or for opacity/text position?) I made a codepen with the problem : https://codepen.io/Demky/pen/pozWZKM -> if you remove the css classes .bottom-right and .changeOpacity there is no more delay. As I said on stackoverflow, if you use the template from w3school and just add an opacity to an element from the back of their card (exemple .flip-card-back), it does the same delay problem so I don't think the error is from my code : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_flip_card What would you do in my situation ? I can't believe it's impossible to customise the back of a card that rotate ? I don't really know if I can post my question here but I don't know where to search a solution Let me know if something isn't clear. ---------------------- Edit : looking to test it with gsap to see if it work; found this thread, will try it soon ;
  4. I'm trying to make an animated map of sorts by having markers show up on google maps at a certain time/after a certain amount of time has passed. I've only found one other post on how to move a marker, but can't seem to "select" the marker to change the opacity. I've got it working with setTimeout, but I would like the ability to scrub the animation, which seems to be quite difficult/slow without GS given the number of points I'm trying to animate. I've included a codepen with 2 points. https://codepen.io/azhao/pen/rgvXJq The only thing I can think of doing is to create all the markers with initial opacity of 0 and then change the opacity of them in the order that I want. Due to the crowdedness, I want the markers to "disappear" after a couple of seconds. (in the example, I thought it'd be easier to start with opacity at 1 and fade to 0 to show that the markers do show up correctly). Is there an easier way to debug this? ie some way to tell if I'm even selecting the google maps marker with greensock? I'm not sure how to start to figure out what's not working
  5. hey guys, i'm new to GSAP & I'm not quite sure what I'm doing wrong here. the desired effect is a fade in when the menu opens & a fade out when it closes, but for some reason i can't get the fade out part to work. here is a link to my codepen. i suspect i'm making a pretty dumb mistake. here's my js: var root = document.documentElement; var body = document.body; var pages = document.querySelectorAll(".page"); var tiles = document.querySelectorAll(".tile"); for (var i = 0; i < tiles.length; i++) { addListeners(tiles[i], pages[i]); } function addListeners(tile, page, menu) { tile.addEventListener("click", function() { animateHero(tile, page); }); page.addEventListener("click", function() { animateHero(page, tile); }); } function animateHero(fromHero, toHero) { var clone = fromHero.cloneNode(true); var from = calculatePosition(fromHero); var to = calculatePosition(toHero); TweenLite.set([fromHero, toHero], { visibility: "hidden" }); TweenLite.set(clone, { position: "absolute", margin: 0 }); TweenLite.to('.k-nav-list li', 0.6, {opacity: 0}); body.appendChild(clone); var style = { x: to.left - from.left, y: to.top - from.top, width: to.width, height: to.height, autoRound: false, ease: Power1.easeOut, onComplete: onComplete }; TweenLite.set(clone, from); TweenLite.to(clone, 0.3, style) function onComplete() { TweenLite.set(toHero, { visibility: "visible" }); body.removeChild(clone); TweenLite.to('.k-nav-list li', 0.6, {opacity: 1}); } } function calculatePosition(element) { var rect = element.getBoundingClientRect(); var scrollTop = window.pageYOffset || root.scrollTop || body.scrollTop || 0; var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0; var clientTop = root.clientTop || body.clientTop || 0; var clientLeft = root.clientLeft || body.clientLeft || 0; return { top: Math.round(rect.top + scrollTop - clientTop), left: Math.round(rect.left + scrollLeft - clientLeft), height: rect.height, width: rect.width, }; } the part that is actually changing the opacity for the element i want is TweenLite.to('.k-nav-list li', 0.6, {opacity: 0}); and TweenLite.to('.k-nav-list li', 0.6, {opacity: 1}); but obviously i'm misunderstanding what's going on here. any help is greatly appreciated.
  6. Hello, I've discovered a problem when using an opacity animation to 0 along with an onComplete callback that removes the tweened element from the DOM. What essentially I'm experiencing is that the element fades a little bit and then suddenly disappears. Almost as if the onComplete fires before the element reaches 0 opacity. Click either of the top left buttons to demo. I've found a workaround to adds a timeout to the onComplete callback, delaying the removal of the tweened element by a multiple of the animation duration. Click either of the bottom left buttons to demo. Although the fade-out is smooth and looks right, the hack solution is not desirable. What can be possibly causing the element to "pop" off the page instead of appearing to fade all the way to 0 before onComplete fires Thanks, DouG
  7. In the attached CodePen, I'm struggling with the Ripple animation that starts on line 28. I want the ripples to start out at 0% opacity, fade in as they scale up, and then go back to 0% before the start of a new repetition cycle. I use the following before starting the timeline: TweenMax.set(".ripple", {opacity:0}); However it's obviously not part of the timeline itself, so it's not resetting the opacity before each cycle. This, at least I assume, is why I always see the ripples fixed at their original size after the initial sequence/repetition. I'm guessing I either need to specify this element's property somehow in the object that initializes with the new TimelineMax({repeat:-1}) on line 28, or make it part of the timeline at the end? I've also noticed strange behavior when I apply overlap values, such as "-=.3", at the end of blocks when that value is greater than the duration of the animation itself. But I don't think that's happening here, is it? Thanks for the help!
  8. 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?
  9. I'm looking for any suggestions as to what might cause the bug I'm currently experiencing in TweenMax 1.19.1 -- I've run out of ideas. Here are the basics: I'm doing a TweenMax.staggerFromTo transformation that simply moves several elements from -20px and 0 opacity to 0px and 1 opacity. The classic "fade in from the left." The animation runs perfectly except that, with the most recent update to TweenMax, the opacity portion of the tween is being skipped altogether. The opacity of the elements is never modified and, even with clearProps not being used, opacity is not left in the Styles attribute after the transformation. The result is that the elements appear on the screen, then move 20 pixels to the right in sequence with no fade in. Some additional information: This bug appears in 1.19.1 only. I can switch back to TweenMax 1.19.0 and it won't appear, switch again to 1.19.1 and it will. So it's something that changed between this version and the last. I've tested in on Chrome and Firefox so it isn't just a single browser. While I've copied the basic situation in a Codepen, I cannot seem to reproduce the bug. There's a lot going on on this page, but no other modifications to this element take place before the Tween with the problem. I've tried adding every CSS attribute assigned to the real element to the Codepen element and I've reproduced the nested function/promise/function structure of the js, but I can't get the issue to appear. The attached pen does show the context, at least. If I set the debugger to break on attribute modification, in 1.19.0 it breaks first on the opacity part of CSSPlugin.js at line 2611. In 1.19.1 it breaks on the matrix portion of CSSPlugin.js at line 1722, skipping the opacity code entirely. If I try to modify only the opacity and not the position, it does nothing at all and no attributes are modified on that element. It's definitely only the opacity tween that's affected. Any thoughts on what has changed in 1.19.1 that could lead to opacity being skipped in a staggerFromTo under certain conditions? I'd prefer not to have to freeze Greensock updates on this project and stay with 1.19.0 for good, but I've spent more than a day on this and I still can't figure out what might be causing this deeply obscure problem.
  10. Hi. I have not been able to find a solution and was hoping someone could help. Basically, I am trying to fade in/out an svg during the animation. At start, I would like to have the opacity transition from 0 at 0 seconds to 1 at 5 seconds (or half way through) and then again transition to 0 at 10 seconds (or the end of the animation). I need this animation to repeat infinitely. How can I achieve this? var snow = $("#snowflake"); var tl = new TimelineMax();var bezierPath = [{ x: 5, y: 4 }, { x: -5, y: 8 }, { x: 5, y: 12 },{ x: -5, y: 16 }]; tl.add(TweenMax.set(snow,{autoAlpha:0}));tl.add(TweenMax.to(snow, 10, { bezier: { type: 'soft', values: bezierPath, smoothOrigin: true, timeResolution: 12, autoAlpha:1 }, ease: Linear.easeNone, repeat:-1, autoAlpha:0}));
  11. Hello, My coworker made this animation prototype: http://animation.addlab.it/ledbyled/index.html However, after a good amount of analysis, it seems like chrome's MSAA rasterization is causing an heavy framerate drop. When MSAA is disabled (chrome://flags/#gpu-rasterization-msaa-sample-count set to 0), the frame rate is around 50fps, but when MSAA is enabled (as it is by default) it drops to 10fps (the exact rate depends on how big is the screen). Doing a trace on the timeline, the bottleneck seems to be on the composite layer: with MSAA it takes more than 200ms, while it's 9ms when disabled! Honestly we don't have a clue on how to solve this and clearly we can't say to our users to disable MSAA... Is there any known work around? I tried the `will-change` CSS property, but nothing changed. Thanks! PS: if you want to rerun the animation without reloading the page, just run `init()` in the console.
  12. Hello, I'm trying to make an animation where at some point there's a sequence of images, one on top of each other, with each image just disappearing to show the one right below. They are absolute positioned and I'm controlling their appearance by simply tweening their opacity. Since I don't want a fade effect, I thought I would set the duration to 0. But this way it seems to ignore the position parameter I set. In the pen I created, I'm expecting to see the number 1, first. And after 1 second of scrolling down, the number 2. Instead, it appears directly the number 2 and the weird thing is that if I scroll back, it actually appears the number 1. Setting both duration to 1 make it actually to work, but I don't get what the issue is. Am I missing something about position and duration?
  13. Hi, guys! I'm new to JS and GSAP and need some help. I'm trying to make quite a simple thing: hide login form with opacity transition. But if you make it like this: TweenMax.to(".plate", .3, {opacity: 0}); ...it just makes the form window transparent, but not hide it — you still can roll mouse over "close" button and over the input field and see how the cursor changes the shape. I have to set display: none; property after the animation is finished. And when I do it like this, the animation doesn't work: TweenMax.to(".plate", .3, { opacity: 0, onComplete: function() { TweenMax.set("."+type, {display:none}); } }); On top of that, the browser detects this JS as it has a syntax mistake, because when I load HTML page none of JS works on the page. Maybe I'm doing something wrong? Please, help to solve the issue. P.S. Is there any forum search? Couldn't find "search on the forum" button.
  14. 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.
  15. Hi! So, here's the link http://goncalo.eu/movies The idea is to create a realistic film projection experience. I'm playing with the opacity of the black overlay, but doesn't feel real. Far from it. Currently, i'm doing this: var tlOpacity = new TimelineMax({repeat: -1, yoyo: true}); tlOpacity .to(".overlay", 3, { opacity: 0.7, scale: 0.95, ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 0.5, points: 50, taper: "none", randomize: true, clamp: false}) }) .to(".overlay", 3, { opacity: 0.8, scale: 1, ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 0.5, points: 50, taper: "none", randomize: true, clamp: false}) }); I've tried several other alternatives, trying to oscillate the opacity value, but with no success. So, I'm trying the GSAP boards for some counselling. Do you have a better idea on how to proceed? Thanks in advance!
  16. Guest

    Opacity Not Working in IE8

    Hi , I am trying fade in fadeout animation using greensock I am using these funcitons for hiding and showing images TweenMax.to("#image_" + id, 2, { display: "block", opacity: 0.99, ease: Power4.easeOut }); TweenMax.to("#image_" + id, 2, { display: "none", opacity: 0 }); It is working in all browsers , but when it comes to IE8 after 2 seconds images are hiding but I opacity is not getting changed. I am using latest CSSPlugin available from green sock. Any help regarding this would be appreciated. Thanks in advance. This is not working in IE8 windows 7 machine http://codepen.io/jonathan/pen/iHdek.
  17. PropKitty

    Opacity on Hover

    Hello! I am new to GSAP but though I read the beginning documentation and watched the getting started video, my first attempt at learning GSAP is not going well. I'm not certain how to even begin with it, but going to be giving it a shot! My HTML: <div class="section"> <h3>Section 1</h3> <p>There's some text and what not in this section.</p> <div class="editMenu"> <ul class="editList"> <li><a href="#">Edit</a></li> <li><a href="#">Remove</a></li> </ul> </div><!-- /editMenu --> </div><!-- /section --> My script: $(document).ready(function () { //hover over Section, make editMenu opacity = 1, scale = 1 //on mouseOut, make editMenu opacity = 1, scale = .7 $(".section").hover(function () { var editMenu = $(this).find(".editmenu"); TweenMax.to(editMenu, 0.2, { css: { opacity: 1 } }); }, function(){ var editMenu = $(this).find(".editmenu"); TweenMax.to(editMenu, 0.2, { css: { opacity: 0 } }); } ); }); The CSS I am somehow assuming is screwing things up: .editMenu{ position: absolute; top: 10px; right: 5px; opacity: 0; transform: scale(.7); } I'm assuming I'm missing something simple! Thank you for any help.
  18. I've got a list of items. Filters are clickable that hide all but the items in that category with a sequence that fade opacity and height to 0. When showing all, items currently at opacity and height 0, fade in correctly, but height "pops" in immediately. Am I missing something obvious here? Also, is there a more appropriate place to post than here? SO perhaps?
  19. 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.
  20. 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/
  21. Hello, I'm working with SplitText and can't seem to get the opacity to work. I have it set to 0 in the CSS and then tween it to 1 in the code but it doesn't work. Any idea why? Also, I can't get the animation running on codepen like I can on my PC. Maybe I'm missing a file or something, but it isn't tweening. Thanks, -Stefan
  22. 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}); }
  23. Hello everyone, Im trying to generate particles in HTML5 canvas and then fade them in or out with random delay and animation duration time. Ultimately creating the effect of stars appears in the sky. So far i've been able to generate the particles with rgba() colour but was unable to animate the alpha value. In the Codepen provided if you change line 18 from _this.alpha = 0; to _this.alpha = 1; you will see that the particles are actually being drawn on the canvas. Im not sure if i can modify directly an rgba value of a canvas shape with TweenMax or i need another approach. My animate function looks like that: function animate(){ for(var i = 0; i < bubbles.length; i++){ var current = bubbles[i]; var newAlpha = i * 0.1 % 1; // TweenMax.to(current, 1, { color: 'rgba('+ current.color + ', '+ newAlpha +')', delay: 0.5, onComplete: function(){ console.log('Completed!'); } }); } loop(); } and i have the loop function to redraw the canvas on every frame: function loop(){ for (var i = 0; i < bubbles.length; i++) { bubbles[i].draw(ctx); } requestAnimationFrame(loop); } Im not sure if im doing the requestAnimationPart properly as well. CodePen: http://codepen.io/MomchilGorchev/pen/mJBBvE Any advice will be much appreciated! Thanks!
  24. Hello in the given pen i want to achieve : 1) Only the elements inside the circle area to be visible with ease effect of gsap.i.e on increasing the radius they must appear onto screen via gsap and on decreasing similarly should disappear 2) the elements to appear or disappear should be draggable with the container as the max limit of circle. 3) the elements should be clickable. 4) the circle opacity should be reversed i.e right now it is rgba(0,0,0,0.8) inside the circle i want it to be outside the circle so as to give the selection effect waiting for help. Thank you
  25. Hi, I'm really new to all this and this is my second post. I'm trying to do something I thought was simple, but something does not work. I have two div (#red and #blue) and two buttons (#opacity1 and #opacity2), clicking the first button will increase the opacity of the first div while decreasing the opacity of the second div and vice versa. The code I'm using doesn't seems to work, can someone help? Thanks UPDATE: There's an error in the code, sorry!!! .to("#blue", 0.1, { opcity: "+=0.1" }, "0"); should be .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); (opacity instead of opcity) and now seems to works. Anyway, am I doing this correctly? or there is a better way? Thanks. $('#opacity1').click(function() { var tl1 = new TimelineMax(); tl1.to("#red", 0.1, {opacity: "-=0.1" }, "0") .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); }); $('#opacity2').click(function() { var tl2 = new TimelineMax(); tl2.to("#red", 0.1, {opacity: "+=0.1" }, "0") .to("#blue", 0.1, { opacity: "-=0.1" }, "0"); });
×