Search the Community
Showing results for tags 'filter'.
-
Here's an example: https://codepen.io/helleholmsen/pen/abXvvQq Is there any known fix for this?
- 4 replies
-
- safari
- safari-bug
-
(and 3 more)
Tagged with:
-
Hey everyone! I'm currently developing a filter system with GSAP Flip using layers as a transition. I have a problem with the appearance delay, my onEnter appear before the onLeave. https://codepen.io/damienmontastier/pen/vYVWoge Using an official GSAP codepen, I have reproduced the effect I would like: https://codepen.io/damienmontastier/pen/OJBOKOo I think I made a lot of mistakes and lot of stuff impossible, do you have any suggestions? For information, my final version (not the both codepen) is under Nuxt.js and I use nextTick to use the changes related to FLIP. Thanks in advance !
-
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)
- 3 replies
-
- filter blur
- filter
-
(and 1 more)
Tagged with:
-
Hi everyone, I'm looking for a way to replicate this effect of this website prototype. It seems like a liquify filter is applied to the images, and when the page scrolls the image is restored. I searched both on this forum and on google but I did not find solutions that could do for me. I'm not a javascript expert, I don't know how to reproduce it. I saw that beyond gsap there are libraries like webgl or curtains.js or pixi.js. Do you have any idea how this can be done? Thank you. https://dribbble.com/shots/6749793-Supreme-Landing-Load-States
-
Hello, I would appreciate help as I cannot find the solution, just a hint or point a topic. I made a simple animation of SVG with mask and filter, the problem is as it is displayed ok with Opera, FF, Chrome, but not IE Edge. I tried to find the problem but had no luck. I also noticed that if change the values in IE console the effect is the same mask with text is misplaced. Thank You for help in advance. Lukasz
-
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
-
Can anyone point me in a solid direction to create something like this. .. https://codepen.io/MandyMadeThis/pen/dGQxaN I'm trying to convert my joomla blog.php into a filterable page. But, I'm getting stuck. It appears that this example requires an exact match of class but my classes are based on categories and tags and no two are alike. My js jquery is at a noob level. So, i don't even know enough to know what to ask. Would truly appreciate any insights.
-
Hi, Any idea how to build this fancy thing using GSAP? http://pharrellwilliams.com/ They want this effect to be insert one of the section inside a one page website, the effect is user can scroll in any direction, drag to view more & also filter effect. Now i lacking idea where to start research the effect or any example to give me idea to start with this fancy stuff. or the keyword for research? Please advice anything, because i fully stuck and hopeless now Million Thanks.
-
After Reading through some topics in the forum and on codepen, I try to do a "filter:drop-shadow(...)" animation on a CSS filter that is supposed to take effect on the SVG, using the onupdate() and TweenMax.set() methods. Unfortunately unsuccessfully so far. The included codepen shows the basic animation: 1. first an animation over opacity and scale, then 2. the "onUpdate -> set" animation, which is, where the magic should happen. There are 2 debug helper functions that throw out some values to the console. And they seem to proof that the values for the shadow distance and the color opacity ( in var logoFilterAmount) are calculated correctly over the course of the animation, but the final result (using getComputedStyle to check) shows strange numbers that I can't explain to myself how they were created. Any insight here would be most welcome! Thank you!
-
Hello all, I have encoutered two problems with gsap. The first one is that I want to make a filter animation with gsap, in which I may modify several css filter properties at the same time. -webkit-filter:saturate(1) hue-rotate(0deg) brightness(1) contrast(1)) grayscale(0.5) How can I set these filter properties in gsap timelineLite? Expecting the similiar way like transform: timelineLite.to(element,{x:100,scaleX:2,rotation:30}) And How can I get these filter properties in separately in progress ? Expecting the similiar way like transform: element._gsTransform.rotation The second one is that how does gsap perform in mobile device with dozens of elements animating at the same time,maybe 30 or 40, and each element animation many have several tweens. Under this situation,which will perform better, css animation or gsap? Any help very much appreciated! I'm looking forward to your reply, thank you very much.
-
Hello everyone. After searching through the forums i've found no particular subject related to SVG filter effects. Is there any support for these filter effects within GSAP at the moment? Attached is my codepen where I have set my SVG to have a GaussionBlur with stdDeviation of 0,50. What I want to do is animate or update that number from 0,50 to 0,0. Any ideas / suggestions as to how I might go about doing this in a timeline? Thanks for listening!
-
This code successfully brightens, then dims image brightness (via the css filter attribute): TweenLite.to($(this).children('img'), 0.1, { css: { '-webkit-filter': 'brightness(1.75)' }); TweenLite.to($(this).children('img'), 1.5, { css: { '-webkit-filter': 'brightness(1.21)' }, delay: 0.15 }); However, I'd like to tween the brightness level to get a smooth transition (rather than the current stepped/chunk method that this code produces). Is there a GreenSock solution/approach to tweening at this level?
-
Noticed a bug involving positional tweens for a DOM element with a dropShadow filter. The reason for the CSS3 dropShadow filter is that I have a transparent PNGs I'd like to provide a shadow for, and GS's box-shadow only adds a shadow to the rectangular block shape of the element. Unfortunately, I've noticed that whenever the filter is applied to an element, I can not position the element via standard GS Tweens. (Ideally this would be as part of a TimelineLite, but the same bug applies to TweenLite / TweenMax calls). Here's a fiddle that shows the phenomenon. By default, the element tweens just fine. However, toggle on the .shadowfilter class (which adds the webkit and FF versions of dropShadow), and the element no longer translates. Any ideas for workarounds for this? Or is this a known bug? I realize that as dropShadow is a filter, this is not going to be supported by GS for sometime, but can I at least still move a filtered element around? http://jsfiddle.net/tkshredder/tYZ8E/9/
-
I am building a tooltip class that upon rollover of a displayobject, I will highlight the object with a tweened glow. When you roll off, the glow will go away. But, if the objects already has its own glow applied, I don't want to interfere with it during removal of my new tooltip highlight glow. I see there is a param for addFilter:boolean, that I think will allow me to add my new glow filter to an object that already has it's own glow filter. And there is a remove:boolean that will auto cleanup that filter at the end of the tween. but what if I want to keep the new highlight-glow attached until a later time, such as rollout? I think what I am trying to do is store the new glowFilter in a variable, so I can later remove that specific glow filter by reference. But I don't see how I can do this within the Tween engine. It looks like almost all the tools are there for me, but not quite. What am I missing? To reiterate, I don't mind if an object has two glow filters applied; one from before, and one from my rollover. But I want to leave the original glow intact, if it had one.
- 2 replies
-
- glow
- glowfilter
-
(and 7 more)
Tagged with:
-
I'm scaleing a huge div with absolutely positioned content inside. The problem is, that Matrix transforms seem to work on every browser (FireFox, Chrome, Safari, Opera, IE7, IE9), but not on IE8. I looked at the source code, and it was generating this code for the filter on IE8: filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.4091666666666667, M12=0, M21=0, M22=0.4091666666666667, Dx=0, Dy=0) ; I remember reading, that IE8 filters must be prefixed with the -ms- prefix. Maybe that is the case, transforms seem not to be working.
- 6 replies
-
- transform
- internet-explorer
-
(and 2 more)
Tagged with:
-
Hello.! GreenSock _ _ _ I have two layers. On bottom layer, I have several buttons, on top layer, I have a shape inside "test" MovieClip import com.greensock.*; import com.greensock.easing.*; TweenMax.to(test, 0, {dropShadowFilter:{color:0x000000, alpha:0.6, blurX:5, blurY:5, strength:1, angle:135, distance:4, inner:true, hideObject:true}}); This code works very nice but I can't have access at the buttons of bottom layer. How to complete hide the "test"? - stay visible the inner shadow and access bottom layer buttons? I was testing various properties with no chance Hope there is a solution Thanks Sakar
- 4 replies
-
- hideObject
- hide
-
(and 6 more)
Tagged with: