CODEWITHSUNDEEP
javascriptcsssvggsapsvg-filters
webbist
webbist

Reputation: 456

SVG Filter animation issue

I had some code written yesterday in situ on site yesterday and all was working fine. Without any change to the codebase today it has ceased to work. 

let $feTurb = $('#feturbulence');

        let timeline = new TimelineMax({
            repeat: -1,
            yoyo: true
        });

        timeline.add(TweenMax.to($feTurb[0], 20, {
            onUpdate: function () {
                var bfX = this.progress() * 0.005 + 0.020,
                    bfY = this.progress() * 0.05 + 0.1,
                    bfStr = bfX.toString() + ' ' + bfY.toString();
                $feTurb[0].setAttribute('baseFrequency', bfStr);
            }
        }), 0);
body {
  background: #000;
}
.ripple {
        min-height: 380px;
        max-width: 850px;
        margin: 0 auto;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        filter: url('#turbulence');
        position: relative;
        z-index: 6;
        padding-top: 20px;
        background-image: url('https://i.imgur.com/4QFPZrY.png');
  background-size: contain;
  background-repeat: no-repeat;
}

svg {
      position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="ripple"></div>
                        <svg xlmns="http://www.w3.org/2000/svg" version="1.1">
                          <filter id="turbulence" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
                            <feTurbulence id="feturbulence" type="fractalNoise" numOctaves="1" seed="2" baseFrequency="0.01968375 0.1468375"></feTurbulence>
                            <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="25" in="SourceGraphic"></feDisplacementMap>
                          </filter>
                        </svg>

https://codepen.io/webbist/pen/zWGNRZ

Example of working code in this codepen

I have no idea why on site it is now not working. I have been debugging all day to get to the route of this issue and am about to give up and try to recreate the effect some other way, any insight anyone can offer will be greatly appreciated.

Upvotes: 1

Views: 724

Answers (2)

webbist
webbist

Reputation: 456

So I figured out the issue, there are a lot of performance-hungry things on my site, to offset these to the GPU I have been using will-change, this on the elements I was filtering caused them to... well not render at all. I have refactored much of the code since to try and improve performance and have it all working now on site, however there is still a hunger for GPU rendering and as such the "ripple" elements using this svg filter fail to respect transition animation css when changing opacity's so probably need to implement the image in the SVG + add some FEAnimation to see if that improves things.

Failing that I will be recreating this effect using pixi.js on canvas.

Upvotes: 0

Michael Mullany
Michael Mullany

Reputation: 31705

You've run into same origin restrictions for feDisplacementMap. If you remove that from your filter, it works just fine. You are not allowed to use a cross origin image as the input to a displacement map because of timing attacks.

(Chrome occasionally misses this and lets a cross origin go through - but it is incorrect behavior)

The easy fix is to convert that imgur origin image into an inline URI within the filter. 

<div class="ripple">
  </div>
      <svg xlmns="http://www.w3.org/2000/svg" version="1.1">
         <filter id="turbulence" filterUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
          <feImage x="0" y="0 " width="400" height="400"  result="displace" xlink:href="data:image/png; etc etc. etc." - not including the full URI here it's way too big - "/>
          <feTurbulence id="feturbulence" type="fractalNoise" numOctaves="1" seed="2" baseFrequency="0.01968375 0.1468375"></feTurbulence>
          <feDisplacementMap xChannelSelector="G" yChannelSelector="B" scale="25" in="displace"></feDisplacementMap>
           </filter>
        </svg>

Upvotes: 1

Related Questions