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":[]}
How to import?
Select the “Paste (All)” option from the Structure panel, or another method involves clicking on an empty area within the Structure panel, pressing the “Esc” key followed by the “Ctrl/Cmd + V” key combination.
{"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
