Animate SVG filter feDisplacementMap / scale on scroll

[Sascha Fincher]

Hi everyone,

 

I am trying to recreated the effect on this site by animating the scale of an svg displacement map (you need to press and hold the mouse button to enter the list of images): https://yuto-takahashi.com (I know this has been done with WebGL, but I do not know enough about shaders and Three or Pixie to replicate it like this)

 

My starting point is this codepen: 

See the Pen eYpGLYL?editors=0010 by GreenSock (@GreenSock) on CodePen

 

However I cannot get my head around the correct usage of the quickSetter when trying to animate the scale of feDisplacementMap, since scale of an sag filter is not a standard property. I also tried the attributePlugin, but with no luck,. 

 

When calling the quickSetter in the codepen I see the following error in the console: InvalidCharacterError: The string contains invalid characters.

 

After trying for two days now to get this to work, I thought maybe someone could point me in the right direction.

 

 

See the Pen bGRNXzW by HankJamesMoody (@HankJamesMoody) on CodePen

[Cassie]

Hey Sascha!

This was a puzzling one. scale in this case is an attribute so you have to set it up a little differently as (I think) GSAP is trying to animate the transform scale instead of the attribute scale.

See the Pen ba15ec4c52300f13d3d109597471f021?editors=0011 by cassie-codes (@cassie-codes) on CodePen

I don't get the same error as you, but I've tweaked the pen and included a simplified tween to show the difference between scale and attr scale

// simplified example - scale doesn't work - attr does
gsap.to('#displacementMap', {
 'scale': 50,
 attr: {scale: 50}
})

 

[Cassie]

Just an FYI - animating the displacement scale on ALL the images at the same time is gonna be real hefty on performance. If you're set on filters I'd try to find a way to only apply it to the images shown in the viewport

[Sascha Fincher]

14 minutes ago, Cassie said:

Just an FYI - animating the displacement scale on ALL the images at the same time is gonna be real hefty on performance. If you're set on filters I'd try to find a way to only apply it to the images shown in the viewport

Thanks, Cassie. The codpen was just a simplified version of what I am trying to accomplish. I will only apply the effect when the image is in view, but event this might be too costly, especially because the effect will be dependent on scroll. I will need to test this out.

[Sascha Fincher]

18 minutes ago, Cassie said:

Hey Sascha!

This was a puzzling one. scale in this case is an attribute so you have to set it up a little differently as (I think) GSAP is trying to animate the transform scale instead of the attribute scale.
 

 

I don't get the same error as you, but I've tweaked the pen and included a simplified tween to show the difference between scale and attr scale

 

 

// simplified example - scale doesn't work - attr does
gsap.to('#displacementMap', {
 'scale': 50,
 attr: {scale: 50}
})

 

Thank you so much, Cassie. I spent literally two days on this and couldn't figure it out.