Jump to content

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

  • 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 39 results

  1. 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
  2. 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.
  3. 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
  4. 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!
  5. 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?
  6. 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.
  7. 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}));
  8. 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.
  9. 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?
  10. 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.
  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. 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!
  13. 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.
  14. 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.
  15. 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?
  16. 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.
  17. 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/
  18. 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
  19. 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}); }
  20. 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!
  21. 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
  22. 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"); });
  23. 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
  24. Sorry for not making a codepen, but my question is so pathetically simple I think it's unnecessary. The following works. (Obviously, it's just supposed to flash the two classes on and off in alternation.) But it doesn't work without the first (or last) two lines of code. Why not? I see redundancy here, and would like to refactor this properly. var foiled_crook = new TimelineMax({repeat:-1}); foiled_crook .set($('.crook'), {autoAlpha:"1"}) .set($('.crook-blocked'), {autoAlpha:"0"}) .add("foiled", "+=2") .set($('.crook'), {autoAlpha:"0"}, "foiled") .set($('.crook-blocked'), {autoAlpha:"1"}, "foiled") .add("trying", "+=2") .set($('.crook'), {autoAlpha:"1"}, "trying") .set($('.crook-blocked'), {autoAlpha:"0"}, "trying") ; Thanks, eh.
  25. 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!