Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jasonworks

How to make this heat distortion effect

Recommended Posts

Hi! How to make this heat distortion effect, I'm new with Greensock. Thanks :)

https://tympanus.net/Tutorials/HeatDistortionEffect/index2.html

Link to comment
Share on other sites

1 hour ago, leode5a7 said:

I don't think it would make sense to use GSAP for this, this is pixel manipulation using the Canvas API.

You can absolutely use GSAP to animate Canvas, however, this wouldn't be something I'd suggest for beginners. If you're looking for an exact match on that effect, I'd follow the tympanus tutorial, however there are other ways to achieve a similar effect with SVG filters (granted it'll be a lot less performant) using GSAP--you'll have to do some digging to find what will give you the closest thing to your desired effect, but here's an example (via @OSUblake (of course), and @Jonathan)

https://codepen.io/osublake/details/gzVvWv

 

  • Like 4
Link to comment
Share on other sites

3 hours ago, leode5a7 said:

I don't think it would make sense to use GSAP for this, this is pixel manipulation using the Canvas API.

 

Let's go all in and do Canvas + SVG. Just paint the heat on. 🔥🔥🔥

 

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

 

 

  • Like 6
Link to comment
Share on other sites

2 hours ago, elegantseagulls said:

I'd follow the tympanus tutorial

 

More like copy and paste the source code. That is a definitely an expert level tutorial if I've ever seen one. I doubt 0.01% of web developers can even write a shader.

 

  • Like 2
  • Haha 1
Link to comment
Share on other sites

Thanks guys! 

7 hours ago, OSUblake said:

 

More like copy and paste the source code. That is a definitely an expert level tutorial if I've ever seen one. I doubt 0.01% of web developers can even write a shader.

 

I think I need to dig it in!!!

Never write any effect like this.

  • Like 1
Link to comment
Share on other sites

Woooah. That paint on heat effect is amazing

Link to comment
Share on other sites

12 minutes ago, Cassie said:

Woooah. That paint on heat effect is amazing

 

Another one I can't take credit for. This is the original. I made that version to show how to use SVG filters inside canvas. Unfortunately, Safari still doesn't support canvas filters.

 

See the Pen zzENQQ by mattpopovich (@mattpopovich) on CodePen

 

 

Link to comment
Share on other sites

The SVG filters in canvas bit was what I was into. Mega cool.

  • Like 1
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.
×