Search the Community

Showing results for tags 'blur'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Categories

  • HTML5 / JS
    • Public
    • "Simply Green" Package
    • "Shockingly Green" Package
    • "Business Green" Package
  • Flash
    • AS3
    • AS2

Found 15 results

  1. I couldn't find anywhere this is mentioned explicitly in the context of Adobe Animate CC. I'm trying to get a blur X on the X-axis while I tween a simple vector object across the stage. This works fine var tl = new TimelineMax() tl.from(this.arrow, .65, {x:-300, ease:Cubic.easeOut}, 2); But if I add a blur with the properties panel or try to use Pixi plugin (yes I have the include plugged in) the banner stops working. var tl = new TimelineMax() tl.from(this.arrow, .65, {x:-300, pixi:{blur:20}, ease:Cubic.easeOut}, 2); 300x250-prototype-17-RIAC-0597-120717.fla
  2. Hi, maybe you remember, I have created a custom animated property for the filter blur property. I think it has a bug, but I'm not sure, I think you can help me out. I know that my timeline contains non optimized code, but it is the simplier version of the real code and it is made to be able to show the bug. If you reduce it to one timeline it will work fine, I know First timeline animates the box from opacity 0 to 1. x and n2blur is there to make sure the properties stays at 0. After it completes, it starts the second timeline from 0s. Second timeline animates the same box and moves it to x:200 and blur:5. If you click on red box, the first timeline plays from the start. After the page load the timeline1 starts ......... then we reach the end of the second timeline too. At this point, everything is fine. Then click on the red box, It jumps back to opacity:0 and x:0, which is great, but it does NOT jump to blur:0 and this is what my problem is. I would like to behave like the in-built x property behaves and resets itself with the from value which applied in the first timeline. window.n2FilterProperty = false; var element = document.createElement("div"); if (/Edge\/\d./i.test(navigator.userAgent)) { //Edge has buggy filter implementation } else if (element.style.webkitFilter !== undefined) { window.n2FilterProperty = "webkitFilter"; } else if (element.style.filter !== undefined) { window.n2FilterProperty = "filter"; } if (window.n2FilterProperty) { _gsScope.CSSPlugin.registerSpecialProp( "n2blur", function(target, value, tween) { var start = 0, match; if ( (match = target.style[window.n2FilterProperty].match(/blur\((.+)?px\)/)) ) { start = parseFloat(match[1]); } if (start == value) { return function() {}; } var diff = value - start; return function(ratio) { target.style[window.n2FilterProperty] = "blur(" + (start + diff * ratio) + "px)"; }; }, 0 ); }
  3. Hello, my animation on iphone is so blur. I use svg on all elements, so there is no way blur. When I animate svg inside a div, it looks blur. When the GSAP timeline ends, everything looks fine. So it is blur during animation. I test on iphone safari and chrome, it is blur. But android looks fine! Here is my source code, if you open it with mobile, it will load mobile code, otherwise it will load desktop code. So there is two version https://github.com/rockmandash/InteractiveInfographic2 Here is the website: https://rockmandash.github.io/InteractiveInfographic2/ I tried these code, but not helping. body { filter: none !important; -webkit-filter: blur(0px) !important; -moz-filter: blur(0px) !important; -ms-filter: blur(0px) !important; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0') !important; } Here is the testing video!! Please take a look what happened. https://youtu.be/_8GOauh1Ko0 Many many thanks on this awesome community!!!!
  4. BlurFilter

    Hello there, Assuming this is a pretty simple idea I just seem to be hitting a wall. I've got a button and on every click I'd like it to blur an image in increments. So everytime I click this button it runs a function where my MC runs the blurFilter below TweenLite.to(mc, 1, {blurFilter:{blurX:10, blurY:10}}); If that was the result of clicking the button once it would BlurX and Y to 10. On click the button a second time it wouldn't do anything because it's already at 10 where I'd like for it to blur to say 12 on second click and 14 on 3rd click and so on. Could something like this work or is it possible? {blurFilter:{blurX:currentBlurX +2, blurY:currentBlurY +2}}); Any input would be appreciated. Cheers
  5. I have the following tween that is called every 60 seconds with a setTimeout: ThrowPropsPlugin.to( nextItem, { throwProps:{ x:{ velocity:200, min: 0, max: 0 } }, onUpdate: function(){ _animateItem( Math.round( ((nextItem._gsTransform.x + 45 ) / vpW ) * 100 ) ); }, ease: Power3.easeOut, onComplete: DRA.prepareNext.init }, 4 ); Everything is going fine, until I leave the browser window (new tab). I want it to continue animating. I read that I can cancel the usage of RAF. But I couldn't read anything about it in the docs ( So I've read that ThrowPropsPlugin uses the TweenLite. I've added the following code to cancel the RAF: function focusBrowserTab() { TweenLite.ticker.useRAF(true); } function blurBrowserTab() { TweenLite.ticker.useRAF(false); } window.addEventListener('focus', focusBrowserTab); window.addEventListener('blur', blurBrowserTab); This would be the best possible solution for me. Disable the usage of RAF when the window is blurred. When the window focus is back I want to make use of RAF again. It is animating now in a non focussed tab, but the tween does not take 4 seconds. More like 30 or so. And when I focus on the tab the timings seem to be messed up. Is there something I do wrong here? Edit: Forgot to tell that I also tried the TweenLite.lagSmoothing(1000, 16); But this didn't make any difference.
  6. Blurred image on scale

    Hello, I'm trying to scale a div containing an image. The animation is alright and does what I want, but I have a strange blur during the zoom, and after the animation is complete, the image is focused again. I've linked my codepen, I don't know where it comes from, and I try some fixes, but none of them works. Thanks for help, Arthur
  7. When using Chrome the text is blurred during the animation and then at the end the text snaps clear and normal. Does not do that with Firefox or Edge. How do I get rid of the blur when viewing with Chrome. Thank you, Kv2
  8. blur effect

    Hi again! Any basic recomendation for make a blur effect in TimelineLite? I enclosed a pic for have an idea what i'm talking about...I dont know if thats helps. Thanks in advanced,
  9. Hello! A new project has brought me to GSAP and I'm starting to wrap my head around what's possible, how to do things, etc. Please forgive me as I fumble my way through this… Rather unsurprisingly, I've stumbled into a wall with regard to the first animation this project requires, which can be described as scaling a huge svg by a large number … but perhaps it's better to link straight to a demo page. Forgive me for not using CodePen—they have a file-size limit and this demo exceeds it: https://jsfiddle.net/163eys6b/7/ Give your browser a little extra time to process that page; like I said, the SVG is huge. The project calls for a big map of (almost) the entire world which starts zoomed all the way in to Amsterdam, which then slowly zooms out all of the way, from scale:1600 to scale:1. In the above JS Fiddle, you'll notice that it does what it should do, but it does it with a stutter (I'm using the latest version of Chrome stable as I type this, version 47.0.2526.111). I can remove the stutter by removing force3D:false, but that results in a very blurry experience about 5 seconds after the zoom-out animation begins. Am I doing this right? Or, is this SVG + scale combination just too much for the browser to handle comfortably? Thanks for your time!
  10. Hello .. To anyone that needs to pause() and resume() your GSAP animations when switching browser tabs or windows and have them stay in sync. I did more tests and found that Firefox and Chrome where sometimes not firing the event focus and blur, when you left the active tab. So i found a better way that is consistent, to check if the current active tab has focus or not, using the HTML5 Visibility API. // main visibility API function // use visibility API to check if current tab is active or not var vis = (function(){ var stateKey, eventKey, keys = { hidden: "visibilitychange", webkitHidden: "webkitvisibilitychange", mozHidden: "mozvisibilitychange", msHidden: "msvisibilitychange" }; for (stateKey in keys) { if (stateKey in document) { eventKey = keys[stateKey]; break; } } return function(c) { if (c) document.addEventListener(eventKey, c); return !document[stateKey]; } })(); Use the HTML5 Visibility API like this: // check if current tab is active or not vis(function(){ if(vis()){ // tween resume() code goes here setTimeout(function(){ console.log("tab is visible - has focus"); },300); } else { // tween pause() code goes here console.log("tab is invisible - has blur"); } }); You will still need the following to check if other windows have focus or not (blur). Chromium type browser like Google Chrome or Latest Opera do not fire all the time when binding the event with jQuery window, so you need to check for window.addEventListener. // check if browser window has focus var notIE = (document.documentMode === undefined), isChromium = window.chrome; if (notIE && !isChromium) { // checks for Firefox and other NON IE Chrome versions $(window).on("focusin", function () { // tween resume() code goes here setTimeout(function(){ console.log("focus"); },300); }).on("focusout", function () { // tween pause() code goes here console.log("blur"); }); } else { // checks for IE and Chromium versions if (window.addEventListener) { // bind focus event window.addEventListener("focus", function (event) { // tween resume() code goes here setTimeout(function(){ console.log("focus"); },300); }, false); // bind blur event window.addEventListener("blur", function (event) { // tween pause() code goes here console.log("blur"); }, false); } else { // bind focus event window.attachEvent("focus", function (event) { // tween resume() code goes here setTimeout(function(){ console.log("focus"); },300); }); // bind focus event window.attachEvent("blur", function (event) { // tween pause() code goes here console.log("blur"); }); } } You will also notice that i have a setTimeout() in the focus event handler so the tab/window has enough time to gain focus, and so the focus event handler fire consistently. I noticed Firefox and Google Chrome were not resuming correctly unless i added the setTimeout(). The reason i use the HTML5 Visibility API is because some browsers like Chrome wont trigger the tab blur unless you actually click inside the other new tab, simply scrolling with the mouse wont trigger the event, I hope this helps anyone who needs to pause() and resume() their animation so they don't get out of sync. **UPDATE** FULL PAGE mode: http://codepen.io/jonathan/full/sxgJl EDIT mode: http://codepen.io/jonathan/pen/sxgJl To Test, try: First clicking inside the Preview panel so the page gains focus (important) Switching between tabs Giving another program focus and come back to the browser See below post for more info Also.. I made it into a jQuery plugin called TabWindowVisibilityManager so you only have to define your pause() and resume() code once inside the FOCUS and BLUR callbacks. See the bottom post. TabWindowVisibilityManager.zip
  11. Hi, Need help with adding blur to a background using GreenSock, in a similar way to the vertically swiping Control Center screen in iOS 7. At the moment we're having to add blur to every single movie clip behind the main layer. TweenMax.to(container.mc, 1, {blurFilter:{blurX:20, blurY:20}}); . What we need is for the foreground layer to blur 'anything' that appears behind it, not just the elements we specify. Is this even possible?
  12. Motion blur and blur in generel

    Coming from a flash background with doing a lot of flash banners Blur was always a very good friend of mine. I did most of my stuff on the timeline and defining blurX or blurY for my movieclip took only seconds and looked kick-ass. However when it comes to JS/CSS/ in generel im struggling to find something that can mimic this the same way. I've been looking a bit on boxShadow which surely seems to be something I could try and play with. Would boxShadow be the way to go or are there other tools I could look at that would give me a quality'wise good result for doing directional/motion blur? Do anyone know if Greensock plan on revolutionizing us with some cool JS motion blur plugin?
  13. Regards, Recently I am learning to use the GreenSock libraries and now I'm doing the animation of photographs column when clicking on a button that scrolls down. Apply a blur filter to give it a blur on the Y axis and I can not make this return to the original state, I mean, that would slowly diminishes blur filter and stops. I'm using TweenMax to animate with As3, the following piece of code is the one I use to make the animation, and the blur does stop abruptly and do not slowly returning to their original state. I hope I can help. thanks TweenMax.to(column, 2 {y:column.y ease:Quart.easeInOut, blurFilter:{blurX:0, blurY:20, remove:true}});
  14. Hi, I found a solution in this forum to this problem - unfortunately it doesn't work for me. I do a rotationY by 180 degrees. So after the tween the image is flipped and you are suposed to see the backside - but then the image is blury. So I applied the solution I found here (deBlur) but then the image flips back to the frontside. I appreciate any hint. Max TweenLite.to(Africa1, .8,{ alpha: 1, rotationY : Africa1.rotationY -180,onComplete: deBlur, onCompleteParams: [Africa1], delay: .3 } ); } //kill matrix3D and reset x and y function deBlur( Africa1:MovieClip ): void { var currentX = Africa1.x; var currentY = Africa1.y; Africa1.transform.matrix3D = null; Africa1.x = currentX; Africa1.y = currentY; }
  15. Hi, I'm new to TweenMax and was trying to achieve the following: I have a movieclip that move from left to right. What I want is that during the animation, to have a blur effect that kind of "fade in" and "fade out" on the beginning and end of the animation. Right now I'm able to blur my mc but I have problem with the "fade" parts. TweenMax.to(row_1, 8, { x:String(newX), blurFilter:{ blurX:40, remove:true } }); Can someone help me figuring out how to fade the blur effect with a sample or a tutorial. Thanks alot