Jump to content
GreenSock

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

Codrop's Slice Revealer like animation using GSAP

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

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?

Link to comment
Share on other sites

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/

 

  • Like 6
Link to comment
Share on other sites

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)

 

  • Like 5
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

8 minutes ago, OSUblake said:

 

You can use scaleX instead of width for better performance.

 

I did ?

Link to comment
Share on other sites

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 :)

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