Search the Community

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

Hi there, I am getting this error when I am opening this url in mobile and dragging bow to left." Error: <g> attribute transform: Expected number, "matrix(0,0,0,0,NaN,NaN)". Here is codepen url '

I have animated an element's attribute using TweenMax like this: TweenMax.to($(".element"), 2, { rotation : 180 }); Later on, I need to get the value of the rotation, is it possible? Something like this: TweenMax.getValue($(".element"), "rotation"); // just an example How can I get the value of an attribute animated by TweenMax?

Hi, If the attribute is multi parted like a 3d coordinate, how can the attribute plugin animate between the multiple numbers (x y z) -> (x y z) ? My object has the following markup: <object id="object_A" rotation="0 0 0"></object> How can i use the attribute plugin or another method to tween the coordinates? {attr:{rotation: "0" }}, { attr:{rotation: " 80" } works but only effects the Z coordinate. I was hoping that it was possible without access to the individual coordinates such as 'rotationX' or 'rotation-x' My try fails silently: var objectA = $( '#object_A' ); tlAnimationTimeline .fromTo( objectA, 10, {attr:{rotation: "0 0 0" }}, { attr:{rotation: " 0 360 180" }, ease: Strong.easeOut, repeat: -1, yoyo: true} )