Codrop's Slice Revealer like animation using GSAP

[Oskar 0 Likes (Newbie)]

Hello, I want to have a scroll transition like codrop's slice revealer demo like this:

https://tympanus.net/Development/SliceRevealer/index3.html

 

I looked into demo's there but found all demos using either SVG or canvas for such animation but actually I want it without using SVG or canvas and using just only image. Is there any way to achieve such animation on scroll in gsap?

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

To create that slice effect without Canvas or SVG people usually create a bunch of divs that use the same background image with different placement.

 

check out this demo here:

See the Pen zpMbdx by GreenSock (@GreenSock) on CodePen

 

@romain.gr wrote the script for doing the slicing. full thread: 

 

 

and here is another by legendary forum ninja @Rodrigo 

 

See the Pen mErJZX?editors=1010 by rhernando (@rhernando) on CodePen

 

 

I would suggest geting the animation you want it first and learning the basics of GSAP first.

Then you can look into a library like Scrollmagic to trigger animations on scroll : http://scrollmagic.io/

 

[Acccent 358 Likes (Leader)]

You can also animate the white sliding elements, like this:

 

See the Pen EQXvJZ by Acccent (@Acccent) on CodePen

 

(That demo has more stuff than is necessary for you, but it should be easy enough to understand what's going on)

 

[OSUblake 9,990 Likes (Superhero)]

14 minutes ago, Acccent said:

You can also animate the white sliding elements, like this:

 

You can use scaleX instead of width for better performance.

[Acccent 358 Likes (Leader)]

8 minutes ago, OSUblake said:

 

You can use scaleX instead of width for better performance.

 

I did ?

[Jonathan 5,176 Likes (Superhero)]

Hello @Oskar and Welcome to the GreenSock Forum!

 

Here is a jQuery Plugin i made awhile back that takes an image, then slices it up, and uses GSAP to animate the sliced elements.

 

In the following examples I slice an image automagically into div elements with the right background position on each slice to make the image look like one image. Then I use a staggerTo() and animate using x (translateX) and or y (translateY)  axis with overflow hidden on the container to create that effect for you.

 

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

 

It requires GSAP to run animation, its free to use as is. When i have more time i will account for responsive and other types of effects.

 

Has various combination of options:

• number of tiles in x or y axis (horizontal or vertical tiles)
• duration
• stagger delay
• direction
• margin for grid wall metro type of look (spaces between each slice for metro grid)

 

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

 

Happy Tweening

[Carl 9,066 Likes (Superhero)]

Very cool, @Jonathan Thanks for sharing!