Search the Community
Showing results for tags 'attribute'.
Found 5 results
-
I'am trying to create an image gallery, where images flow on z-axis. I am able make image div to flow on z-axis using scrolltrigger. But what I wanted, was to control the opacity of div to go from 1 to 0 when the image div (class name as "square") is close to camera/ viewport (for this code it is z = 700) so it will have a fade effect. In short whenever any one of these five image div goes z = 700 the opacity should be 0 . In style.css I've used perspective attribute for 3d perspective which will allow me to have images to flow on z-axis. I got this idea from awwwards.com original concept for reference: http://ab-architects.nextpage.agency/public/ I am trying to create gallery like this but cant figure out how to control the opacity in between the timeline animation... any suggestions on how I could achieve this effect using timeline and keep the scrolltrigger. Thanks in advance -
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} )
