Premium element

Visual Effect

Puzzle Reveal

Puzzle Reveal breaks an image into multiple pieces and animates them to create a reveal effect as users scroll. It is designed to add visual interest to sections of a webpage with customizable configurations, including the number of pieces, animation anticipation, and size.

Preview

Quick Setup

data-puzzle-reveal=true

Required

Activates the Puzzle Reveal effect on the section.

data-puzzle-image

Required

Defines the URL of the image to be revealed.

Available pieces

data-puzzle-pieces

Optional

2x2

2x3

3x3

4x3

4x4

Advanced configuration

data-puzzle-size

Optional

Sets the width and height of the puzzle container as a percentage of the section's size. Format should be "width x height".

Default: 80x60

data-puzzle-anticipation

Optional

Controls the anticipation of when the animation starts relative to the scrolling position. Positive values make the animation start earlier, while negative values delay it. Values can be both positive and negative.

  • Positive values will delay the animation start.
  • Negative values will anticipate the animation start.
  • Example values:
    • "10" (delays animation start by 10%)
    • "-5" (starts animation 5% earlier)

Recommendations

  • Use an Appropriate Number of Pieces: Increasing the number of puzzle pieces can significantly affect performance, especially on mobile devices. A setup of 3x3 pieces is recommended to maintain smooth animations.
  • Anticipation Values: When configuring the anticipation (data-puzzle-anticipation), test various values to determine the best animation timing. Both positive and negative values can create different animation experiences.

We're here to help

Choose how you'd like to connect with our support team

Contact Support

Get help from our team of experts

Response within 24 hours