Jump to content
Search Community

Search the Community

Showing results for tags 'blur'.

  • 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

  • Learning Center
  • Blog

Categories

  • Products
  • Plugins

Categories

  • Examples
  • Showcase

Categories

  • FAQ

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

  1. Here's an example: https://codepen.io/helleholmsen/pen/abXvvQq Is there any known fix for this?
  2. GreenSock

    PixiPlugin

    PixiJS is a canvas library that can utilize WebGL for insanely fast rendering, plus it has all sorts of crazy filters and fun effects. You could always use GSAP to animate PixiJS objects (after all, GSAP can tween any property of any JS object), but it was a tad cumbersome with certain properties because they're tucked inside sub-objects in PixiJS's API, like object.position.x, object.scale.y, object.skew.x, etc. Plus PixiJS defines rotational values in radians instead of degrees which isn't as intuitive for most developers/designers. PixiPlugin saves you the headaches: //old way (without plugin): gsap.to(pixiObject.scale, {x: 2, y: 1.5}); gsap.to(pixiObject.skew, {x: 30 * Math.PI / 180}); gsap.to(pixiObject, {rotation: 60 * Math.PI / 180}); //new way (with plugin): gsap.to(pixiObject, {pixi:{scaleX: 2, scaleY: 1.5, skewX: 30, rotation: 60}}); PixiJS requires that you define color-related values in a format like 0xFF0000 but with PixiPlugin, you can define them the same way you would in CSS, like "red" | "#F00" | "#FF0000" | "rgb(255,0,0)" | "hsl(0, 100%, 50%)" | 0xFF0000. You can even do relative HSL values! "hsl(+=180, +=0%, +=0%)". Another big convenience is that PixiPlugin recognizes some special values like saturation, brightness, contrast, hue, and colorize (which all leverage a ColorMatrixFilter under the hood). Or if you have a custom ColorMatrixFilter, just pass that in as the colorMatrixFilter property and it'll handle animating between states. Lastly, PixiPlugin recognizes blur, blurX, and blurY properties, so it's very simple to apply a blur without having to create a new BlurFilter instance, add it to the filters array, and animate its properties separately. PixiPlugin significantly improves developer ergonomics for anyone animating in PixiJS. Less code, fewer headaches, and faster production. See the docs for details. To learn how to include PixiPlugin into your project, see the GSAP install docs.
  3. The blur animation on the peach coloured text is super glitchy when you visit the website for the first time only (Chrome browser). https://witnessestohistory.museeholocauste.ca/ You can recreate the issue by visiting in "Incognito mode", or clearing your cache. If you refresh your browser or visit another page, the same animation runs super smoothly. My current animation setting is : this.tl.staggerFromTo(this[splitKey], this.duration, { css: { opacity:0, scale:1.3, filter:"blur(10px)", z:0 } }, { css: { opacity:1, scale:1, filter:"blur(0px)", z:0 }, ease:this.easing}, this.stagger[splitKey]); I have tried all of the following : - this.tl.progress(1).progress(0); (before playing my timeline) - z:0.01 - backface-visibility: hidden - will-change: transform, filter - -webkit-font-smoothing: subpixel-antialiased - gsap.set(this[splitKey], { force3D:true }) - Adding a huge delay before the animation starts to prevent overlapping of effects / images loading - Adding page cache - Adding a "loader" with a blur animation out to prepare the GPU for the effect, since it seems to run smoothly the second time (didn't work)
  4. Hi, I'm trying to animate the stdDeviation attribute of a svg filter, it's actually working when I inspect the element, it's updating the attribute, but the rendering is either very bad and slow (firefox) or not rendering at all (chrome). Are the browsers struggling to render properly an animated svg filter? the SVG filter (if stdDeviation="0 20" it works fine but if I animate the values it render very pourly) : <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewPort="0 0 500 300"> <filter id="blur" x="-50%" y="-50%" width="200%" height="200%"> <feGaussianBlur id="test" in="SourceGraphic" stdDeviation="0 0" /> </filter> </svg> the CSS : p { width: 50%; margin: 0 auto 50px auto; font-size: 35px; font-weight: bold; color: white; filter: url("#blur"); } and JS : let currentPixel = window.pageYOffset; const looper = function(){ const newPixel = window.pageYOffset; const diff = newPixel - currentPixel; const speed = diff * .1; const blur = speed < 0 ? speed * -1 : speed; //console.log(speed); //TweenMax.to($('.item-content'), .5, {skewY: speed + 'deg'}); TweenMax.to("#test", 0, {attr:{stdDeviation:"0 " + blur}}); //TweenMax.to("#test", 0, {attr:{stdDeviation:"0 " + blur * 2}}); currentPixel = newPixel; requestAnimationFrame(looper); } looper() Once again, GSAP seems to do the job properly, but the rendering on the screen is terrible. I might miss something very basic. If anyone has an idea,... Thank you
  5. Hi guys! I have some problem tring to animate some PIXI filters inside a timeline with other dom element animations. I provide a pen with an example of slider. My goal is to animate blur filter and dom element in the same timeline. The problem is that in swap Timeline tween with dom element tween doesn't start. swap .fromTo(blurFilter, SWAPTIME, { blur: 10 }, { blur: 0, yoyo: true }) .fromTo(canvasContainer, SWAPTIME, { scale: 1 }, { scale: 1.1, yoyo: true }) Any suggestions? Thank you
  6. 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
  7. 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 ); }
  8. 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!!!!
  9. 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
  10. 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.
  11. 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
  12. 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
  13. 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
  14. 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,
  15. 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!
  16. 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?
  17. 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?
  18. 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}});
  19. 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; }
  20. 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
×
×
  • Create New...