Animate scale attribute of SVGFEDisplacementMapElement

[girishk21]

I'm trying to animate the scale attribute of SVGFEDisplacementMapElement

<motion.feDisplacementMap
  initial={{ scale: 10 }}
  animate={{ scale: 100 }}
/>

But, I do understand this behaviour, which animates the transform property 😅.

Is there a way to distinguish the transform: scale from the scale attribute of the element?

Thanks!

[tochibedford]

Hey, @girishk21 . I literally just ran int this exact issue. how did you work around this?

[TommySorensen]

I have the same issue. @mattgperry do you know any workaround for this?

Im trying to animate the scale prop in this way. But as @girishk21 mentions, using the motion component with scale, will use the transform scale instead and not the prop. So the question is if there is any way to update a specific prop which is not a CSS style with framer motion?

<span style={{ filter: "url('someId')" }} />

<svg width={0} height={0}>
  <defs>
    <filter id="someId">
      <feTurbulence
        type="fractalNoise"
        baseFrequency="0.10 0.02"
        numOctaves="1"
        result="warp"
      />
      <feDisplacementMap
        xChannelSelector="R"
        yChannelSelector="G"
        scale={animateThisWithFramerMotion}
        in="SourceGraphic"
        in2="warp"
      />
    </filter>
  </defs>
</svg>

[elizabetdev]

To animate the scale attribute you can use the attrScale:

<motion.feDisplacementMap
  in="SourceGraphic"
  in2="turbulence"
  scale="0"
  animate={{ attrScale: [0, 10, 2, 30, 0] }}
  transition={{ repeat: Infinity, duration: 2, repeatDelay: 5 }}
/>