Jump to content
Search Community

How to make this heat distortion effect

jasonworks test
Moderator Tag

Recommended Posts

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

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

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.
×
×
  • Create New...