fbpx
CODE: BM30OFF
Our Best Deal of The Year
30$ off every year
0 days
0 hours
0 minutes
0 seconds
CODE: BM30OFF
Our Best Deal of The Year
30$ off every year
0 days
0 hours
0 minutes
0 seconds
  • CSS
  • GSAP
  • BF

How to build a “PUFF OUT GRID”

DEMO: https://bricksmotion.co/puff-out-grid/
Copy Bricks structure
{"content":[{"id":"hvptnv","name":"div","parent":0,"children":["fwgrbs","utloyc"],"settings":{"_cssGlobalClasses":["lqaqqy"]},"label":"WRAPPER"},{"id":"fwgrbs","name":"div","parent":"hvptnv","children":["pjwtlr","oujuus","gdapya","xoksgm","icpsxc","lmzrqa","xffixu","buxmaz","ahcsxk","inifdn","qmybil","gcnnie","sceynl","hrqlwt","qavhrr","gzgoky","wuvwgx"],"settings":{"_cssGlobalClasses":["sqlvgl"]},"label":"GRID"},{"id":"pjwtlr","name":"div","parent":"fwgrbs","children":[],"settings":{"_cssGlobalClasses":["wryzjs"]},"label":"IMAGE WRAPPER"},{"id":"oujuus","name":"div","parent":"fwgrbs","children":["loageb"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"2","_gridItemColumnSpan":"4"},"label":"IMAGE WRAPPER"},{"id":"loageb","name":"image","parent":"oujuus","children":[],"settings":{"image":{"url":"https://picsum.photos/id/240/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"gdapya","name":"div","parent":"fwgrbs","children":["hytnwo"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"3","_gridItemColumnSpan":"2"},"label":"IMAGE WRAPPER"},{"id":"hytnwo","name":"image","parent":"gdapya","children":[],"settings":{"image":{"url":"https://picsum.photos/id/250/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"xoksgm","name":"div","parent":"fwgrbs","children":["glxsuz"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"3","_gridItemColumnSpan":"5"},"label":"IMAGE WRAPPER"},{"id":"glxsuz","name":"image","parent":"xoksgm","children":[],"settings":{"image":{"url":"https://picsum.photos/id/260/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"icpsxc","name":"div","parent":"fwgrbs","children":["pwdygp"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"5","_gridItemColumnSpan":"7"},"label":"IMAGE WRAPPER"},{"id":"pwdygp","name":"image","parent":"icpsxc","children":[],"settings":{"image":{"url":"https://picsum.photos/id/266/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"lmzrqa","name":"div","parent":"fwgrbs","children":["umhibv"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"6","_gridItemColumnSpan":"3"},"label":"IMAGE WRAPPER"},{"id":"umhibv","name":"image","parent":"lmzrqa","children":[],"settings":{"image":{"url":"https://picsum.photos/id/233/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"xffixu","name":"div","parent":"fwgrbs","children":["lnoopp"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"7","_gridItemColumnSpan":"6"},"label":"IMAGE WRAPPER"},{"id":"lnoopp","name":"image","parent":"xffixu","children":[],"settings":{"image":{"url":"https://picsum.photos/id/238/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"buxmaz","name":"div","parent":"fwgrbs","children":["egebpm"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"8","_gridItemColumnSpan":"1"},"label":"IMAGE WRAPPER"},{"id":"egebpm","name":"image","parent":"buxmaz","children":[],"settings":{"image":{"url":"https://picsum.photos/id/244/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"ahcsxk","name":"div","parent":"fwgrbs","children":["brybch"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"8","_gridItemColumnSpan":"5"},"label":"IMAGE WRAPPER"},{"id":"brybch","name":"image","parent":"ahcsxk","children":[],"settings":{"image":{"url":"https://picsum.photos/id/248/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"inifdn","name":"div","parent":"fwgrbs","children":["bjpqgn"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"9","_gridItemColumnSpan":"2"},"label":"IMAGE WRAPPER"},{"id":"bjpqgn","name":"image","parent":"inifdn","children":[],"settings":{"image":{"url":"https://picsum.photos/id/255/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"qmybil","name":"div","parent":"fwgrbs","children":["thwzlf"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"10","_gridItemColumnSpan":"8"},"label":"IMAGE WRAPPER"},{"id":"thwzlf","name":"image","parent":"qmybil","children":[],"settings":{"image":{"url":"https://picsum.photos/id/256/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"gcnnie","name":"div","parent":"fwgrbs","children":["eclhjc"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"11","_gridItemColumnSpan":"4"},"label":"IMAGE WRAPPER"},{"id":"eclhjc","name":"image","parent":"gcnnie","children":[],"settings":{"image":{"url":"https://picsum.photos/id/278/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"sceynl","name":"div","parent":"fwgrbs","children":["rvyren"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"12","_gridItemColumnSpan":"3"},"label":"IMAGE WRAPPER"},{"id":"rvyren","name":"image","parent":"sceynl","children":[],"settings":{"image":{"url":"https://picsum.photos/id/277/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"hrqlwt","name":"div","parent":"fwgrbs","children":["lirtqo"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"13","_gridItemColumnSpan":"7"},"label":"IMAGE WRAPPER"},{"id":"lirtqo","name":"image","parent":"hrqlwt","children":[],"settings":{"image":{"url":"https://picsum.photos/id/272/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"qavhrr","name":"div","parent":"fwgrbs","children":["dixcax"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"14","_gridItemColumnSpan":"6"},"label":"IMAGE WRAPPER"},{"id":"dixcax","name":"image","parent":"qavhrr","children":[],"settings":{"image":{"url":"https://picsum.photos/id/265/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"gzgoky","name":"div","parent":"fwgrbs","children":["ddxxcw"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"16","_gridItemColumnSpan":"7"},"label":"IMAGE WRAPPER"},{"id":"ddxxcw","name":"image","parent":"gzgoky","children":[],"settings":{"image":{"url":"https://picsum.photos/id/248/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"wuvwgx","name":"div","parent":"fwgrbs","children":["nlvjgt"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"15","_gridItemColumnSpan":"3"},"label":"IMAGE WRAPPER"},{"id":"nlvjgt","name":"image","parent":"wuvwgx","children":[],"settings":{"image":{"url":"https://picsum.photos/id/258/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"utloyc","name":"div","parent":"hvptnv","children":["xznzyw"],"settings":{"_width":"100%","_height":"100%","_position":"fixed","_top":"0","_left":"0","_cssGlobalClasses":["jtxwij"]},"label":"HEADLINE WRAPPER"},{"id":"xznzyw","name":"heading","parent":"utloyc","children":[],"settings":{"text":"PUFF OUT GRID","_typography":{"font-family":"custom_font_31","font-size":"119px","color":{"raw":"var(--primary)"}},"_typography:mobile_landscape":{"font-size":"79px"},"_typography:mobile_portrait":{"font-size":"44px"}}}],"source":"bricksCopiedElements","sourceUrl":"https://bricksmotion.co","version":"1.7.3","globalClasses":[{"id":"lqaqqy","name":"puff-out_wrapper","settings":{"_display":"flex","_alignSelf":"center","_justifyContent":"center","_alignItems":"center","_direction":"row"}},{"id":"sqlvgl","name":"grid-frame","settings":{"_display":"grid","_gridTemplateColumns":"repeat(8,1fr)","_gridTemplateColumns:mobile_landscape":"repeat(4,1fr)"}},{"id":"wryzjs","name":"grid-image__wrapper","settings":{"_cssCustom":".grid-image__wrapper {\n aspect-ratio: 1/1;\n}"}},{"id":"sqtrdg","name":"grid-image","settings":[]},{"id":"jtxwij","name":"fixed-headline__wrapper","settings":{"_display":"flex","_direction":"column","_alignSelf":"center","_alignItems":"center","_width":"100%","_height":"100%","_position":"fixed","_justifyContent":"center","_top":"0","_left":"0"}}],"globalElements":[]}
{"content":[{"id":"hvptnv","name":"div","parent":0,"children":["fwgrbs","utloyc"],"settings":{"_cssGlobalClasses":["lqaqqy"]},"label":"WRAPPER"},{"id":"fwgrbs","name":"div","parent":"hvptnv","children":["pjwtlr","oujuus","gdapya","xoksgm","icpsxc","lmzrqa","xffixu","buxmaz","ahcsxk","inifdn","qmybil","gcnnie","sceynl","hrqlwt","qavhrr","gzgoky","wuvwgx"],"settings":{"_cssGlobalClasses":["sqlvgl"]},"label":"GRID"},{"id":"pjwtlr","name":"div","parent":"fwgrbs","children":[],"settings":{"_cssGlobalClasses":["wryzjs"]},"label":"IMAGE WRAPPER"},{"id":"oujuus","name":"div","parent":"fwgrbs","children":["loageb"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"2","_gridItemColumnSpan":"4"},"label":"IMAGE WRAPPER"},{"id":"loageb","name":"image","parent":"oujuus","children":[],"settings":{"image":{"url":"https://picsum.photos/id/240/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"gdapya","name":"div","parent":"fwgrbs","children":["hytnwo"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"3","_gridItemColumnSpan":"2"},"label":"IMAGE WRAPPER"},{"id":"hytnwo","name":"image","parent":"gdapya","children":[],"settings":{"image":{"url":"https://picsum.photos/id/250/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"xoksgm","name":"div","parent":"fwgrbs","children":["glxsuz"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"3","_gridItemColumnSpan":"5"},"label":"IMAGE WRAPPER"},{"id":"glxsuz","name":"image","parent":"xoksgm","children":[],"settings":{"image":{"url":"https://picsum.photos/id/260/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"icpsxc","name":"div","parent":"fwgrbs","children":["pwdygp"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"5","_gridItemColumnSpan":"7"},"label":"IMAGE WRAPPER"},{"id":"pwdygp","name":"image","parent":"icpsxc","children":[],"settings":{"image":{"url":"https://picsum.photos/id/266/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"lmzrqa","name":"div","parent":"fwgrbs","children":["umhibv"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"6","_gridItemColumnSpan":"3"},"label":"IMAGE WRAPPER"},{"id":"umhibv","name":"image","parent":"lmzrqa","children":[],"settings":{"image":{"url":"https://picsum.photos/id/233/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"xffixu","name":"div","parent":"fwgrbs","children":["lnoopp"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"7","_gridItemColumnSpan":"6"},"label":"IMAGE WRAPPER"},{"id":"lnoopp","name":"image","parent":"xffixu","children":[],"settings":{"image":{"url":"https://picsum.photos/id/238/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"buxmaz","name":"div","parent":"fwgrbs","children":["egebpm"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"8","_gridItemColumnSpan":"1"},"label":"IMAGE WRAPPER"},{"id":"egebpm","name":"image","parent":"buxmaz","children":[],"settings":{"image":{"url":"https://picsum.photos/id/244/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"ahcsxk","name":"div","parent":"fwgrbs","children":["brybch"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"8","_gridItemColumnSpan":"5"},"label":"IMAGE WRAPPER"},{"id":"brybch","name":"image","parent":"ahcsxk","children":[],"settings":{"image":{"url":"https://picsum.photos/id/248/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"inifdn","name":"div","parent":"fwgrbs","children":["bjpqgn"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"9","_gridItemColumnSpan":"2"},"label":"IMAGE WRAPPER"},{"id":"bjpqgn","name":"image","parent":"inifdn","children":[],"settings":{"image":{"url":"https://picsum.photos/id/255/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"qmybil","name":"div","parent":"fwgrbs","children":["thwzlf"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"10","_gridItemColumnSpan":"8"},"label":"IMAGE WRAPPER"},{"id":"thwzlf","name":"image","parent":"qmybil","children":[],"settings":{"image":{"url":"https://picsum.photos/id/256/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"gcnnie","name":"div","parent":"fwgrbs","children":["eclhjc"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"11","_gridItemColumnSpan":"4"},"label":"IMAGE WRAPPER"},{"id":"eclhjc","name":"image","parent":"gcnnie","children":[],"settings":{"image":{"url":"https://picsum.photos/id/278/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"sceynl","name":"div","parent":"fwgrbs","children":["rvyren"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"12","_gridItemColumnSpan":"3"},"label":"IMAGE WRAPPER"},{"id":"rvyren","name":"image","parent":"sceynl","children":[],"settings":{"image":{"url":"https://picsum.photos/id/277/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"hrqlwt","name":"div","parent":"fwgrbs","children":["lirtqo"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"13","_gridItemColumnSpan":"7"},"label":"IMAGE WRAPPER"},{"id":"lirtqo","name":"image","parent":"hrqlwt","children":[],"settings":{"image":{"url":"https://picsum.photos/id/272/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"qavhrr","name":"div","parent":"fwgrbs","children":["dixcax"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"14","_gridItemColumnSpan":"6"},"label":"IMAGE WRAPPER"},{"id":"dixcax","name":"image","parent":"qavhrr","children":[],"settings":{"image":{"url":"https://picsum.photos/id/265/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"gzgoky","name":"div","parent":"fwgrbs","children":["ddxxcw"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"16","_gridItemColumnSpan":"7"},"label":"IMAGE WRAPPER"},{"id":"ddxxcw","name":"image","parent":"gzgoky","children":[],"settings":{"image":{"url":"https://picsum.photos/id/248/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"wuvwgx","name":"div","parent":"fwgrbs","children":["nlvjgt"],"settings":{"_cssGlobalClasses":["wryzjs"],"_gridItemRowSpan":"15","_gridItemColumnSpan":"3"},"label":"IMAGE WRAPPER"},{"id":"nlvjgt","name":"image","parent":"wuvwgx","children":[],"settings":{"image":{"url":"https://picsum.photos/id/258/300/300","external":true,"filename":"300"},"_cssGlobalClasses":["sqtrdg"]}},{"id":"utloyc","name":"div","parent":"hvptnv","children":["xznzyw"],"settings":{"_width":"100%","_height":"100%","_position":"fixed","_top":"0","_left":"0","_cssGlobalClasses":["jtxwij"]},"label":"HEADLINE WRAPPER"},{"id":"xznzyw","name":"heading","parent":"utloyc","children":[],"settings":{"text":"PUFF OUT GRID","_typography":{"font-family":"custom_font_31","font-size":"119px","color":{"raw":"var(--primary)"}},"_typography:mobile_landscape":{"font-size":"79px"},"_typography:mobile_portrait":{"font-size":"44px"}}}],"source":"bricksCopiedElements","sourceUrl":"https://bricksmotion.co","version":"1.7.3","globalClasses":[{"id":"lqaqqy","name":"puff-out_wrapper","settings":{"_display":"flex","_alignSelf":"center","_justifyContent":"center","_alignItems":"center","_direction":"row"}},{"id":"sqlvgl","name":"grid-frame","settings":{"_display":"grid","_gridTemplateColumns":"repeat(8,1fr)","_gridTemplateColumns:mobile_landscape":"repeat(4,1fr)"}},{"id":"wryzjs","name":"grid-image__wrapper","settings":{"_cssCustom":".grid-image__wrapper {\n aspect-ratio: 1/1;\n}"}},{"id":"sqtrdg","name":"grid-image","settings":[]},{"id":"jtxwij","name":"fixed-headline__wrapper","settings":{"_display":"flex","_direction":"column","_alignSelf":"center","_alignItems":"center","_width":"100%","_height":"100%","_position":"fixed","_justifyContent":"center","_top":"0","_left":"0"}}],"globalElements":[]}

Structure & Styling

1. WRAPPER:

Add a DIV, give it a class of .puff-out_wrapper set it to flex and center it on all axis.

EDIT: add overflow:hidden to prevent overflow issues.

2. FIXED HEADLINE:

Inside the added .puff-out_wrapper add another DIV. We will give it a class of .fixed-headline__wrapper, this will be the wrapper for the fixed headline.

Assign the following styles to the .fixed-headline__wrapper:

flex: center it on all axis
width: 100%
height: 100%
position: fixed
top: 0
left: 0

Add a Heading Element inside of the .fixed-headline__wrapper and style it as you like.

3. GRID:

Add another DIV inside the .puff-out_wrapper.

HTML structure should now look like this:

Give the GRID DIV you just added a class of .grid-frame and add following styles:

display: grid
grid template columns: repeat(8,1fr)

We can now add our grid items inside of our .grid-frame.

Add a DIV with the class of .grid-image__wrapper inside the .grid-frame and add some custom CSS:

root {
aspect-ratio: 1/1;
}

This code will make sure, that the .grid-image__wrapper is always a square.

Inside the .grid-image__wrapper you can add your first IMAGE. Add the class .grid-image to your IMAGE. Make sure your IMAGE is a square.

In my case, I used placeholder images from: https://picsum.photos/id/240/300/300 you can change the ID and another image will be provided.

Now you can duplicate the .grid-image__wrapper as often as you like.

To place the IMAGES inside the grid you should set the column and row on the IMAGEID level of each .grid-image__wrapper.

GSAP with Bricksforge

Open the Bricksforge Panel. Click on Timelines and add a new Timeline. Give the Timeline a descriptive name like: PUFF OUT GIRD ON SCROLL.

Assign the following settings in the Settings Column:

Trigger: ScrollTrigger

Trigger Selector: .grid-image

Handle triggers separately: ON

Scroll Start: top top

Scroll End: top bottom

Use Scrub: ON

Smooth Scrub Value: 0

Now add a Animation in the Animations Column with the following settings:

Method: From To

In the From Tab:

Scale: 1

Opacity: 1

Blur: 0



In the To Tab:

Scale: 3

Opacity: 0

Blur: 20



That’s it. Feel free to copy the Bricks structure and download the Bricksforge timeline. Hope you enjoyed it!

More Tutorials