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;
}
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.
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!