Jump to content
Search Community

Codrop's Slice Revealer like animation using GSAP

Oskar 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

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

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