Jump to content


Displacement Map, Busy to Still...Anybody?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi GS folks,


I have a banner animation where I want the BG to reveal like a flag or water...even displacement reveal that goes still in 5 seconds.


I don't really know that much about SVG. Can anybody tell me where the heck I should start, or have an example that I could examine?


Much obliged to any helpers out there. :)

Link to comment
Share on other sites

Hey Blake,


I saw that one, man. Way cool, but is there way to get that displacement to stop flush or ease into being without distortion or being displaced?


Sorry if that's kind of a lazy question. I really just don't have a very good grasp of SVG or canvas anything. Not sure what property that would possibly involve. 


Is achieving something like this effect to a flat no-distortion stand-still possible?


Thanks for the response!

Link to comment
Share on other sites

There's really nothing on this. Wow, I can't find any info on making displacement maps go from 0 (zero) displacement to 100 or vice versa.


Is there currently no way to do this now? I'm looking for attributes to alter but there's nothing to sample. I'm seeing displacement cycling, but nothing that ramps it's wavy distortion from one value to another.


Is there an attribute I should alter for this? I can't seem to find study on this anywhere.

Link to comment
Share on other sites

Hi @soupking


I have a lot of posts about displacement mapping, mostly about PixiJS, but it works exactly the same in SVG. However, there is a bug in Chrome that prevents you from using an image for the map, so my demo here is broke. ?


See the Pen WQyBJb by osublake (@osublake) on CodePen



SVG documentation is really bad, but MDN does have a little info on <feDisplacementMap>.




Look at the scale attribute. That controls how much displacement takes place.


See the Pen gzVvWv by osublake (@osublake) on CodePen



  • Like 3
Link to comment
Share on other sites

Hi OSUblake,


This is...awesome. I keep looking at the "attr" attribute (redundant award) with awe. Like I read about it like a great control mechanism for objects but don't quite understand how to imply it. Is it kind of like I'm referencing a DIV, this DIV type has it's own attributes. As long as they fall under an API umbrella I can pretty much just "quote" it in to control it. Is that right?


Like, for a general IMG, I could stretch the image by width:

.to("#imageInQuestion", 4, {
    attr: {
      width: 100


Is that kind of the idea? If so, I might've not found what I was looking for because #turbwave had no scale. Again, freakin' luddite with SVG.


Thanks a bunch OSUblake, I'm off to the races, big help.

Link to comment
Share on other sites

Yes, image width and height are good examples of attributes that can animated using the AttrPlugin. Attributes aren't too common on HTML elements, but for SVG, it's a completely different story.


For example, this is what a circle looks like in SVG. cx is centerX, cy is centerY, and r is radius.

<circle id="myCircle" class="circle" cx="50" cy="50" r="25"></circle>



And to animate those attributes..

TweenLite.to("#myCircle", 1, {
  attr: {
    cx: 100,
    cy: 100,
    r: 50


id and class are attributes too, but you normally wouldn't animate those for obvious reasons.



  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.