Jump to content
Search Community

Different entrances/exits effects for images

pzagor2 test
Moderator Tag

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


I'm trying to create different entrances/exits effects for images. 


For example.

I would like an image to appear on the screen assembled from small grains. An image would need to be split into individual pixels (or small group of pixels), and they would gradually fade in one by one. 




I would like an image to enter the screen assembled from a mash of small parallelograms. An image would be split into smaller shapes, and they would zoom in over time. 


Are there any examples out there I could reuse or look at for reference. 

Any pointers or suggestions are welcome. 





Link to comment
Share on other sites

Thank you, Jonathan.


I was able to recreate something close to what I need for the grain fade in animation. But It has some serious performance issues when I create a canvas for every pixel (or 5) out of the image. Which is what I would need to achieve the desired effect. 


See the Pen GjJXQV by anon (@anon) on CodePen


You can see the performance issue by dropping grainDensity in the options object to 5 or 10.


Any other option?

  • Like 1
Link to comment
Share on other sites

You don't need to create a canvas for every shape. Look at this video example. Click to blow it up.



So here's a better way to do what you were doing, although it could be optimized a little better. Note: Don't lower the size too much or you will crash CodePen!!!

See the Pen 5b6b9f5b6c0c7486dbdee1f87e71c0e1 by osublake (@osublake) on CodePen


For something smaller than that, you can use pixel data. Check out this post. Note that some of those demos use Three.js. 



Pixi.js is also a nice renderer. It's like a 2d version of Three.js. Check out some of their filters here...


  • Like 2
Link to comment
Share on other sites

I want in this party!


Here's my take on this:


See the Pen yaYQyQ by dipscom (@dipscom) on CodePen


Vanilla JS and SVG - does not crash the browser when you lower the size of the squares but is gets real janky when you have anything smaller than 5. At size 1 it will make your CPU sing and your motherboard sweat. I didn't try anything smaller than 1. I wouldn't recommend and won't answer if processors melt trying to play this.


At size 10 is buttery smooth on my machine and plays fine at 5.


Other than that, unless you start using something like Pixi or ThreeJS (as recommended by Blake) you will have to find a way to tap into the GPU directly, there's no way a browser will handle per pixel manipulation on its own.


You could cheat. Create a small series of granulated images where each pixel goes from black to white (or vice-versa) at a random duration and add/multiply those images one on top of the other using the resulting composite as a mask. That way, the browser will be only doing one large calculation, rather than hundreds of small ones.

  • Like 2
Link to comment
Share on other sites

I want in this party!


Here's my take on this:


See the Pen yaYQyQ by dipscom (@dipscom) on CodePen


Well alright then. Lets party!


You got a pretty cool reordering effect going on the there. Can it be multicolored?


And I just saw some nice image transitions on your CodePen page.

See the Pen zByqBV by dipscom (@dipscom) on CodePen

See the Pen KrAqxg by dipscom (@dipscom) on CodePen


you will have to find a way to tap into the GPU directly, there's no way a browser will handle per pixel manipulation on its own.


There's actually a really fast way to do pixel manipulation without WebGL. Most pixel manipulation is 8-bit. This requires you to write 3 values (RGB) to the image data array for every pixel. But you can do 32bit pixel manipulation using Typed Arrays, reducing the number of writes per pixel down to 1, making it faster by a factor of 3.


However, understanding how to use a Typed Array can be confusing. It also helps if you know how to use bitwise operators. Another weird thing is the RGB values are backwards, and the hex code has 8 characters instead of 6 because it has an alpha value. So you're most likely used to seeing hex colors like this, #RRGGBB, but for 32-bit it's AABBGGRR.


Look at how fast you can tint this image a more appropriate yellow color. If you're were doing 8-bit manipulation, it probably lock the browser up every now and then if you were to rapidly change the slider. It almost looks like you're moving another element over it because it's so fast.

See the Pen 668d9f2cc305f96e801d15153176075d?editors=0010 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

All right, last one. This one uses flood filling. What's flood filling? A paint bucket tool. Understanding how it works can best be explained through zombies and cats.



Get it? Got it? Good!


A flood fill is typically pretty fast, but if we slow it down and apply it to random parts of an image, it creates a really cool burn/dissolve effect, revealing an image underneath it!

See the Pen 0529176902a4dba5fac8b18f7b5edd5f?editors=0010 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Back from my adventures in Italy.


Firstly, @jonathan, did I just missed you here?




Now onto the continuous hijack of another innocent post...




You know we can have it with all sorts of effects in SVG, just like in canvas. I won't go and make a slider because I'm lazy.


See the Pen bwBbAk?editors=1010 by dipscom (@dipscom) on CodePen


You also know as well as I do that for a ton of things, canvas is way better tool than SVG. I wish I could keep up with your arms race but I can't. I wave the white flag here and now. 


Great links, btw, there's a load of stuff there I want to absorb. It will take time.



  • Like 3
Link to comment
Share on other sites

And here's a lesser known fact that most people don't realize. Canvas is just a bitmap, so you can use it as the as the source image for SVG filters! Here's the first example I came across doing a search on CodePen.

See the Pen GjJvwg by balapa (@balapa) on CodePen


And another...

See the Pen rxfyI by motorlatitude (@motorlatitude) on CodePen

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