metafizzy / metafizzy/packery

Expanding tiles and return to it's original position

Open
#465 5 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
4.3k
Forks
324
PR merge metrics
No merged PRs in 30d

Description

I'm having issues when trying to expand elements of the grid and returning them to the original position when clicking again on them.

See example, and desired functionality below:
https://codepen.io/Accao/pen/PKxWvB

Expanded tiles can be one, two, three, or four columns wide (I've used 3 columns for all the tiles expanded in the example).
Tiles in the first and second columns need to expand from the same row position and from the left of the grid (See 5 and 11 how they work, good.) And tiles of the 3rd and 4th column need to expand from the same row position and from the right of the grid.

The tiles 2, 6, 9 and 14 need to expand from the very left, and when clicked again, return to it's original position. Same for the tiles from the 3rd and 4th column, they expand correctly but don't come back to the original position.

I've been trying to achieve this with the fit properties with no luck.
Any help would be much appreciated.

Thank you @desandro ,
Alejandro

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodePen example and review Packery's tile expansion behavior, including the fit properties mentioned in the issue. Reproduce the cases for tiles 2, 6, 9, and 14, then verify that tiles expand from the required grid edge and return to their original positions when clicked again.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.