Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                  <div class="drag-wall">
    <div class="row" data-offset="0" style="position: absolute; translate: none; rotate: none; scale: none; transform: translate(-1216.47px, -857.25px);"><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(0px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(490.36px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(980.72px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1471.08px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1961.44px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2451.8px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2942.16px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3432.52px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3922.88px, 0px); height: 396px; width: 396px;"></div></div>
    <div class="row" data-offset="0" style="position: absolute; translate: none; rotate: none; scale: none; transform: translate(-1216.47px, -857.25px);"><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(0px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(490.36px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(980.72px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1471.08px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1961.44px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2451.8px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2942.16px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3432.52px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3922.88px, 0px); height: 396px; width: 396px;"></div></div>
    <div class="row" data-offset="0" style="position: absolute; translate: none; rotate: none; scale: none; transform: translate(-1216.47px, -857.25px);"><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(0px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(490.36px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(980.72px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1471.08px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1961.44px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2451.8px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2942.16px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3432.52px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3922.88px, 0px); height: 396px; width: 396px;"></div></div>
    <div class="row" data-offset="0" style="position: absolute; translate: none; rotate: none; scale: none; transform: translate(-1216.47px, -857.25px);"><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(0px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(490.36px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(980.72px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1471.08px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1961.44px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2451.8px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2942.16px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3432.52px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3922.88px, 0px); height: 396px; width: 396px;"></div></div>
    <div class="row" data-offset="0" style="position: absolute; translate: none; rotate: none; scale: none; transform: translate(-1216.47px, -857.25px);"><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(0px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(490.36px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(980.72px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1471.08px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1961.44px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2451.8px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2942.16px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3432.52px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3922.88px, 0px); height: 396px; width: 396px;"></div></div>
    <div class="row" data-offset="0" style="position: absolute; translate: none; rotate: none; scale: none; transform: translate(-1216.47px, -857.25px);"><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(0px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(490.36px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(980.72px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1471.08px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1961.44px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2451.8px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2942.16px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3432.52px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3922.88px, 0px); height: 396px; width: 396px;"></div></div>
    <div class="row" data-offset="0" style="position: absolute; translate: none; rotate: none; scale: none; transform: translate(-1216.47px, -857.25px);"><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(0px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(490.36px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(980.72px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1471.08px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(1961.44px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2451.8px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(2942.16px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3432.52px, 0px); height: 396px; width: 396px;"></div><div class="wall-image" style="opacity: 0; left: 0px; top: 0px; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; background-image: url(&quot;https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png&quot;); translate: none; rotate: none; scale: none; transform: translate(3922.88px, 0px); height: 396px; width: 396px;"></div></div>
  </div>
              
            
!

CSS

              
                  body {
  background: black;
}
.drag-wall {
  pointer-events: all;
}

.wall-image {
  background: orange !important;
  position: relative;
  transition: opacity 750ms ease;
  opacity: 1 !important;
}

.mask {
  cursor: all-scroll !important;
}
              
            
!

JS

              
                 (() => {

  explore = function() {

    if( !document.querySelector('.drag-wall') ) return;
  imgURLArray = ["https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png"];
    
    gsap.registerPlugin(Draggable, InertiaPlugin);

    function centerGrid() {
      let bcr = lastCenteredElem.getBoundingClientRect();
      let midX = bcr.x + bcr.width / 2;
      let midY = bcr.y + bcr.height / 2;
      
      let x = winMidX - midX;
      let y = winMidY - midY;
      
      gsap.to(containerSelector, {
        ease: "sine.inOut",
        duration: 0.7,
        x: "+=" + x,
        y: "+=" + y
      });
    }

    function updateCenterElem() {
      let elems = document.elementsFromPoint(winMidX, winMidY);
      elems.forEach(elem => {
        if(elem.matches(imageSelector) && !lastCenteredElem.isSameNode(elem)) {
          lastCenteredElem = elem; 
          
        }
      });
    }



    const containerId = "drag-wall";
    const containerSelector = "." + containerId;
    const rowClass = "row"
    const rowSelector = "." + rowClass;
    const imageClass = "wall-image";
    const imageSelector = "." + imageClass;
    // const imgURLArray = null;
    const imgURLArrayLength = imgURLArray ? imgURLArray.length : -1;
    let rowNum, imgNum;

    if( window.innerWidth < 835 ) {
      rowNum = 12;
      imgNum = 5;
    } else {
      rowNum = 5;
      imgNum = 9;
    }

    const useInertia = true;
    const useCenterGrid = true;

    let rows,
        imgMidIndex,
        rowMidIndex;
    const rowArray = [];
    const imgRep = [];

    let boxWidth,
        boxHeight,
        gutter,
        horizSpacing,
        vertSpacing,
        horizOffset,
        vertOffset,
        winMidX,
        winMidY,
        lastCenteredElem;

    function createImageGrid() {
      for(let y = 0; y < rowNum; y++) {
        let row = document.createElement("div");
        row.className = rowClass;
          for(let x = 0; x < imgNum; x++) {
            let image = document.createElement("div");
            image.style.opacity = '0';
            image.className = imageClass;
            row.appendChild(image);
          }
        document.querySelector(containerSelector).appendChild(row);
        
        // Add the images to our representation
        imgRep.push(gsap.utils.toArray(row.querySelectorAll(imageSelector)));
      }
      
      rows = document.querySelectorAll(rowSelector),
      imgMidIndex = Math.floor(imgNum / 2),
      rowMidIndex = Math.floor(rowNum / 2);
    }

    function createMask() {
      let mask = document.createElement("div");
      mask.className = "mask";
      document.body.appendChild(mask);
      
      gsap.set(mask, {
        position: "absolute",
        top: 0,
        left: 0,
        width: "100vw",
        height: "100vh",
        zIndex: 1500
      });
    }

    function resize() {
      winMidX = innerWidth / 2;
      winMidY = innerHeight / 2;
      if( window.innerWidth < 835 ) {
        boxWidth = innerWidth * 0.45;
        boxHeight = innerWidth * 0.45;
        gutter = innerWidth * 0.075;
      } else {
        boxWidth = innerWidth * 0.21;
        boxHeight = innerWidth * 0.21;
        gutter = innerWidth * 0.05;
      }
      horizSpacing = boxWidth + gutter;
      vertSpacing = boxHeight + gutter;
      horizOffset = -(imgMidIndex * horizSpacing + boxWidth / 2) + winMidX;
      vertOffset = -(rowMidIndex * vertSpacing + boxHeight / 2) + winMidY;
      
      // Reset our container and rows
      gsap.set(containerSelector, {x: 0, y: 0});
      
      rows.forEach(function(row, i) {
        gsap.set(row, {
          attr: { 
            "data-offset": function() {
              if(i % 2 === 0) return false;
              else return true;
            }
          },
          x: function() {
            if(i % 2 === 0)
              return horizOffset;
            else
              return horizOffset - boxWidth / 2;
          },
          y: function() {
            return i * vertSpacing + vertOffset;
          },
        });

        gsap.set(row.querySelectorAll(imageSelector), {
          width: boxWidth,
          height: boxHeight,
          x: function(index) {
            return index * horizSpacing;
          }
        });
        
        // Update our representation of the rows
        rowArray[i] = row;
      });
    }


    function setStyles() {
      gsap.set("body", {
        margin: 0,
        overflow: "hidden"
      });
      
      const randImgSize = Math.floor( Math.max(innerWidth, innerHeight) / 3);
      gsap.set(imageSelector, {
        backgroundImage: function(index) {
            if( imgURLArray ) {
              let imgUrl = imgURLArray[index % imgURLArrayLength];
              return 'url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Grey_Square.svg/2048px-Grey_Square.svg.png)';
            }
        },
        position: "absolute",
        backgroundSize: "contain",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center",
        top: 0,
        left: 0
      });

      gsap.set(rowSelector, {
        position: "absolute"
      });
    }

    function createDraggable() {
      let options = {
        duration: 1.6,
        trigger: ".mask",
        dragResistance: 0.5,
        resistance: 400,
        onDrag: updateCenterElem,
        allowEventDefault: true
      }
      
      if(useInertia) {
        options.inertia = true;
        options.onThrowUpdate = updateCenterElem;
        
      } else if(useCenterGrid) { // No inertia
        options.onDragEnd = centerGrid;
      }
      
      dragAction = Draggable.create(containerSelector, options); 
    }


    function init() {
      gsap.set(containerSelector, {willChange: "transform"});
      
      createImageGrid();
      createMask();

      lastCenteredElem = document.querySelectorAll(imageSelector)[(rowMidIndex - 1) * imgNum + imgMidIndex];
      
      createDraggable();
      
      setStyles();
      
      resize();
      window.addEventListener( 'resize', resize );
    }

    init();
    
    Observer.create({
        target: '.mask',
        type: "wheel",
        onUp: (self) => {
          console.log(self);
          dragAction[0].update();
        }, 
        onDown: (self) => {
          console.log(self);
          dragAction[0].update();
        },
        onLeft: (self) => {
          console.log(self);
          dragAction[0].update();
        },
        onRight: (self) => {
          console.log(self);
          dragAction[0].update();
        }
      });

  }

  explore();

})();
              
            
!
999px

Console