Jump to content

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

Stagger a puzzle

Recommended Posts



I am trying to animate a puzzle. I would like to make each piece appearing from the top-left of the svg puzzle without success. For the moment, as shown in the codepen, it's completely random.


Any suggestion?


See the Pen QWjzyRr by venizia03 (@venizia03) on CodePen

Link to comment
Share on other sites

Hey @venizia03,


You can use the property from


from [String | Integer | Array]: The position in the Array from which the stagger will emanate. To begin with a particular element, for example, use the number representing that element's index in the target Array. So from:4 begins staggering at the 5th element in the Array (because Arrays use zero-based indexes).


If your array is in the right order, it will work.


See the Pen NWxGNRa by mikeK (@mikeK) on CodePen


Happy staggering ...



  • Like 2
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.