Displacement Map, Busy to Still...Anybody?

[soupking]

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.

[OSUblake]

Here's one by @Jonathan

 

See the Pen NqZPwd by jonathan (@jonathan) on CodePen

 

[soupking]

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!

[soupking]

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.

[OSUblake]

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>.

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap

 

 

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

 

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

 

 

[soupking]

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.

[OSUblake]

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.