• CSS
  • GSAP
  • BF

Full Screen Menu

DEMO: https://bricksmotion.co/demos/full-screen-menu/
Copy Bricks structure
{"content":[{"id":"nqmwim","name":"div","parent":0,"children":["szggwq","fhatdc","afulxq","ejsgmi"],"settings":{},"label":"COPY & PASTE WRAPPER"},{"id":"szggwq","name":"div","parent":"nqmwim","children":["zsimhu"],"settings":{"_cssGlobalClasses":["jmqpdy"]},"label":"NEWSLETTER (CAN BE DELETED)"},{"id":"zsimhu","name":"text-basic","parent":"szggwq","children":[],"settings":{"text":"Get notified when new tutorials are released","link":{"type":"internal","postId":"2"},"_typography":{"text-decoration":"underline","color":{"raw":"var(--primary-ultra-light)"},"font-size":"var(--text-xs)"}}},{"id":"fhatdc","name":"button","parent":"nqmwim","children":[],"settings":{"icon":{"library":"themify","icon":"ti-close"},"iconGap":"0","_cssGlobalClasses":["vluijm"],"iconTypography":{"font-size":"var(--text-xxl)"},"tag":"button"},"label":"MENU TRIGGER"},{"id":"afulxq","name":"div","parent":"nqmwim","children":["zsvfly"],"settings":{"_cssGlobalClasses":["euhrfj"]},"label":"MENU WRAPPER"},{"id":"zsvfly","name":"container","parent":"afulxq","children":["qxokjy","ffvzdf"],"settings":{"_cssGlobalClasses":["sbdqvs"]},"label":"MENU CONTAINER"},{"id":"qxokjy","name":"div","parent":"zsvfly","children":["chioaw","mdwjhi","zomviy","kogxmf"],"settings":{"_cssGlobalClasses":["ypwtns"]},"label":"NAV WRAPPER"},{"id":"chioaw","name":"div","parent":"qxokjy","children":["oxwwuk","pcskqh"],"settings":{"tag":"a","link":{"type":"internal","postId":"2"},"_cssGlobalClasses":["xjxtnx","wcdbhg"]},"label":"MENU ITEM (Projects)"},{"id":"oxwwuk","name":"text-basic","parent":"chioaw","children":[],"settings":{"text":"Projects","_cssGlobalClasses":["vcwvzx"]},"label":"MENU LINK"},{"id":"pcskqh","name":"text-basic","parent":"chioaw","children":[],"settings":{"text":"Projects","_cssGlobalClasses":["oukzbr"]},"label":"MENU LINK HOVER"},{"id":"mdwjhi","name":"div","parent":"qxokjy","children":["slemzx","zrmukf"],"settings":{"tag":"a","link":{"type":"internal","postId":"2"},"_cssGlobalClasses":["xjxtnx","rqggvf"]},"label":"MENU ITEM (About)"},{"id":"slemzx","name":"text-basic","parent":"mdwjhi","children":[],"settings":{"text":"ABOUT","_cssGlobalClasses":["vcwvzx"]},"label":"MENU LINK"},{"id":"zrmukf","name":"text-basic","parent":"mdwjhi","children":[],"settings":{"text":"About","_cssGlobalClasses":["oukzbr"]},"label":"MENU LINK HOVER"},{"id":"zomviy","name":"div","parent":"qxokjy","children":["covapy","cotzlq"],"settings":{"tag":"a","link":{"type":"internal","postId":"2"},"_cssGlobalClasses":["xjxtnx","hllcje"]},"label":"MENU ITEM (NEWS)"},{"id":"covapy","name":"text-basic","parent":"zomviy","children":[],"settings":{"text":"NEWS","_cssGlobalClasses":["vcwvzx"]},"label":"MENU LINK"},{"id":"cotzlq","name":"text-basic","parent":"zomviy","children":[],"settings":{"text":"NEWS","_cssGlobalClasses":["oukzbr"]},"label":"MENU LINK HOVER"},{"id":"kogxmf","name":"div","parent":"qxokjy","children":["clucgi","stnfhn"],"settings":{"tag":"a","link":{"type":"internal","postId":"2"},"_cssGlobalClasses":["xjxtnx","ykpwih"]},"label":"MENU ITEM (CONTACT)"},{"id":"clucgi","name":"text-basic","parent":"kogxmf","children":[],"settings":{"text":"CONTACT","_cssGlobalClasses":["vcwvzx"]},"label":"MENU LINK"},{"id":"stnfhn","name":"text-basic","parent":"kogxmf","children":[],"settings":{"text":"CONTACT","_cssGlobalClasses":["oukzbr"]},"label":"MENU LINK HOVER"},{"id":"ffvzdf","name":"div","parent":"zsvfly","children":["fccqyg","cugtsj","ceyvpb","kwjnae"],"settings":{"_cssGlobalClasses":["gpmgqy"]},"label":"IMAGE WRAPPER"},{"id":"fccqyg","name":"div","parent":"ffvzdf","children":["cdgjkg"],"settings":{"_cssGlobalClasses":["esxbfs","wcdbhg"]},"label":"IMAGE HOLDER (Projects)"},{"id":"cdgjkg","name":"image","parent":"fccqyg","children":[],"settings":{"image":{"id":422,"filename":"don-kaveen-F0CTHqaZth0-unsplash-scaled.jpg","size":"full","full":"https://bricksmotion.co/wp-content/uploads/don-kaveen-F0CTHqaZth0-unsplash-scaled.jpg","url":"https://bricksmotion.co/wp-content/uploads/don-kaveen-F0CTHqaZth0-unsplash-scaled.jpg"},"_cssGlobalClasses":["wvvlmh"]},"label":"IMAGE"},{"id":"cugtsj","name":"div","parent":"ffvzdf","children":["djhhnj"],"settings":{"_cssGlobalClasses":["esxbfs","rqggvf"]},"label":"IMAGE HOLDER (About)"},{"id":"djhhnj","name":"image","parent":"cugtsj","children":[],"settings":{"image":{"id":423,"filename":"hi-estudio-vkOzfEPcD2M-unsplash.jpg","size":"full","full":"https://bricksmotion.co/wp-content/uploads/hi-estudio-vkOzfEPcD2M-unsplash.jpg","url":"https://bricksmotion.co/wp-content/uploads/hi-estudio-vkOzfEPcD2M-unsplash.jpg"},"_cssGlobalClasses":["wvvlmh"]},"label":"IMAGE"},{"id":"ceyvpb","name":"div","parent":"ffvzdf","children":["vbzbax"],"settings":{"_cssGlobalClasses":["esxbfs","hllcje"]},"label":"IMAGE HOLDER (News)"},{"id":"vbzbax","name":"image","parent":"ceyvpb","children":[],"settings":{"image":{"id":424,"filename":"simon-lee-zft-W1kVEhg-unsplash.jpg","size":"full","full":"https://bricksmotion.co/wp-content/uploads/simon-lee-zft-W1kVEhg-unsplash.jpg","url":"https://bricksmotion.co/wp-content/uploads/simon-lee-zft-W1kVEhg-unsplash.jpg"},"_cssGlobalClasses":["wvvlmh"]},"label":"IMAGE"},{"id":"kwjnae","name":"div","parent":"ffvzdf","children":["zoifeu"],"settings":{"_cssGlobalClasses":["esxbfs","ykpwih"]},"label":"IMAGE HOLDER (Contact)"},{"id":"zoifeu","name":"image","parent":"kwjnae","children":[],"settings":{"image":{"id":425,"filename":"steve-johnson-tiYNaiIQUag-unsplash-scaled.jpg","size":"full","full":"https://bricksmotion.co/wp-content/uploads/steve-johnson-tiYNaiIQUag-unsplash-scaled.jpg","url":"https://bricksmotion.co/wp-content/uploads/steve-johnson-tiYNaiIQUag-unsplash-scaled.jpg"},"_cssGlobalClasses":["wvvlmh"]},"label":"IMAGE"},{"id":"ejsgmi","name":"section","parent":"nqmwim","children":["rvmrwc"],"settings":{"_cssGlobalClasses":["blxbli"]},"label":"HERO SECTION"},{"id":"rvmrwc","name":"container","parent":"ejsgmi","children":["mnqbiu"],"settings":{"_cssGlobalClasses":["uyulxk"]},"label":"HERO CONTAINER"},{"id":"mnqbiu","name":"heading","parent":"rvmrwc","children":[],"settings":{"text":"Full Screen Menu","tag":"h1","_cssGlobalClasses":["hmxmnl"]},"label":"HEADING"}],"source":"bricksCopiedElements","sourceUrl":"https://bricksmotion.co","version":"1.7.3","globalClasses":[{"id":"jmqpdy","name":"newsletter-signup","settings":{"_position":"fixed","_bottom":"20px","_right":"20px","_padding":{"top":"var(--space-xs)","right":"var(--space-xs)","bottom":"var(--space-xs)","left":"var(--space-xs)"},"_border":{"radius":{"top":"var(--radius-xs)","right":"var(--radius-xs)","bottom":"var(--radius-xs)","left":"var(--radius-xs)"}},"_background":{"color":{"raw":"var(--primary)"}}}},{"id":"vluijm","name":"fs-menu_trigger","settings":{"_position":"absolute","_top":"50px","_right":"100px","_display":"flex","_width":"80px","_height":"80px","_cursor":"pointer","_zIndex":"999","_right:tablet_portrait":"50px","_heightMin":"80px","_widthMin":"80px","_background":{"color":{"raw":"#c2ff2e"}},"_border":{"radius":{"top":"50%","right":"50%","bottom":"50%","left":"50%"}},"_padding":{"top":"0","bottom":"0","right":"0","left":"0"},"_alignSelf":"center","_justifyContent":"center","_alignItems":"center"}},{"id":"euhrfj","name":"fs-menu_wrapper","settings":{"_position":"fixed","_width":"100%","_top":"0","_left":"0","_height":"100%","_display":"flex","_justifyContent":"center","_alignSelf":"center","_alignItems":"center","_cssCustom":".fs-menu_wrapper {\n opacity: 1;\n}","_padding":{"left":"2rem","right":"2rem"},"_overflow":"hidden","_background":{"color":{"hex":"#243300"}}}},{"id":"sbdqvs","name":"fs-menu_container","settings":{"_direction":"row","_justifyContent":"space-between","_position":"relative"}},{"id":"ypwtns","name":"fs-menu_nav","settings":{"_alignSelf":"flex-start","_justifyContent":"flex-start","_alignItems":"flex-start","_display":"flex","_direction":"column","_rowGap":"1rem","_width":"100%","_position":"relative","_zIndex":"2"}},{"id":"xjxtnx","name":"fs-menu_item","settings":{"_position":"relative","_cursor":"pointer","_overflow":"hidden"}},{"id":"wcdbhg","name":"is-projects","settings":{}},{"id":"vcwvzx","name":"fs-menu_link","settings":{"_typography":{"font-size":"14rem","font-family":"Helvetica Neue","line-height":"1","font-weight":"700","text-transform":"uppercase","color":{"hex":"#f7ffe6"}},"_typography:tablet_portrait":{"font-size":"8rem"},"_typography:mobile_portrait":{"font-size":"6rem"}}},{"id":"oukzbr","name":"fs-menu_link--hover","settings":{"_typography":{"font-size":"14rem","font-family":"Helvetica Neue","line-height":"1","font-weight":"700","text-transform":"uppercase","color":{"hex":"#c2ff2e"}},"_position":"absolute","_left":"0","_top":"0","_typography:tablet_portrait":{"font-size":"8rem"},"_typography:mobile_portrait":{"font-size":"6rem"},"_display:tablet_portrait":"none"}},{"id":"rqggvf","name":"is-about","settings":[]},{"id":"hllcje","name":"is-news","settings":[]},{"id":"ykpwih","name":"is-contact","settings":{}},{"id":"gpmgqy","name":"fs-menu_image-wrapper","settings":{"_position":"absolute","_right":"0","_top":"0","_width":"50%","_zIndex":"1","_height":"120%","_overflow":"hidden"}},{"id":"esxbfs","name":"fs-menu_image-holder","settings":{"_display:tablet_portrait":"none","_height":"100%","_width":"100%","_position":"absolute","_top":"0","_left":"0"}},{"id":"wvvlmh","name":"fs-menu_image","settings":{"_objectFit":"cover","_width":"100%","_height":"100%"}},{"id":"blxbli","name":"fs-section","settings":{"_height":"100vh","_alignSelf":"center","_justifyContent":"center","_alignItems":"center"}},{"id":"uyulxk","name":"fs-container","settings":{"_justifyContent":"center","_alignItems":"center","_alignSelf":"center"}},{"id":"hmxmnl","name":"fs-heading","settings":{"_typography":{"font-family":"Helvetica Neue","font-weight":"300"}}}],"globalElements":[]}
Download [FS] SET - Links & Wrapper - EVENT
Download [FS] Menu reveal TIMELINE
Download [FS] Nav Item - Hover - TIMELINE
Download [FS] Nav Item - Image (Projects) - TIMELINE
Download [FS] Nav Item - Image (About) - TIMELINE
Download [FS] Nav Item - Image (News) - TIMELINE
Download [FS] Nav Item - Image (Contact) - TIMELINE
{"content":[{"id":"nqmwim","name":"div","parent":0,"children":["szggwq","fhatdc","afulxq","ejsgmi"],"settings":{},"label":"COPY & PASTE WRAPPER"},{"id":"szggwq","name":"div","parent":"nqmwim","children":["zsimhu"],"settings":{"_cssGlobalClasses":["jmqpdy"]},"label":"NEWSLETTER (CAN BE DELETED)"},{"id":"zsimhu","name":"text-basic","parent":"szggwq","children":[],"settings":{"text":"Get notified when new tutorials are released","link":{"type":"internal","postId":"2"},"_typography":{"text-decoration":"underline","color":{"raw":"var(--primary-ultra-light)"},"font-size":"var(--text-xs)"}}},{"id":"fhatdc","name":"button","parent":"nqmwim","children":[],"settings":{"icon":{"library":"themify","icon":"ti-close"},"iconGap":"0","_cssGlobalClasses":["vluijm"],"iconTypography":{"font-size":"var(--text-xxl)"},"tag":"button"},"label":"MENU TRIGGER"},{"id":"afulxq","name":"div","parent":"nqmwim","children":["zsvfly"],"settings":{"_cssGlobalClasses":["euhrfj"]},"label":"MENU WRAPPER"},{"id":"zsvfly","name":"container","parent":"afulxq","children":["qxokjy","ffvzdf"],"settings":{"_cssGlobalClasses":["sbdqvs"]},"label":"MENU CONTAINER"},{"id":"qxokjy","name":"div","parent":"zsvfly","children":["chioaw","mdwjhi","zomviy","kogxmf"],"settings":{"_cssGlobalClasses":["ypwtns"]},"label":"NAV WRAPPER"},{"id":"chioaw","name":"div","parent":"qxokjy","children":["oxwwuk","pcskqh"],"settings":{"tag":"a","link":{"type":"internal","postId":"2"},"_cssGlobalClasses":["xjxtnx","wcdbhg"]},"label":"MENU ITEM (Projects)"},{"id":"oxwwuk","name":"text-basic","parent":"chioaw","children":[],"settings":{"text":"Projects","_cssGlobalClasses":["vcwvzx"]},"label":"MENU LINK"},{"id":"pcskqh","name":"text-basic","parent":"chioaw","children":[],"settings":{"text":"Projects","_cssGlobalClasses":["oukzbr"]},"label":"MENU LINK HOVER"},{"id":"mdwjhi","name":"div","parent":"qxokjy","children":["slemzx","zrmukf"],"settings":{"tag":"a","link":{"type":"internal","postId":"2"},"_cssGlobalClasses":["xjxtnx","rqggvf"]},"label":"MENU ITEM (About)"},{"id":"slemzx","name":"text-basic","parent":"mdwjhi","children":[],"settings":{"text":"ABOUT","_cssGlobalClasses":["vcwvzx"]},"label":"MENU LINK"},{"id":"zrmukf","name":"text-basic","parent":"mdwjhi","children":[],"settings":{"text":"About","_cssGlobalClasses":["oukzbr"]},"label":"MENU LINK HOVER"},{"id":"zomviy","name":"div","parent":"qxokjy","children":["covapy","cotzlq"],"settings":{"tag":"a","link":{"type":"internal","postId":"2"},"_cssGlobalClasses":["xjxtnx","hllcje"]},"label":"MENU ITEM (NEWS)"},{"id":"covapy","name":"text-basic","parent":"zomviy","children":[],"settings":{"text":"NEWS","_cssGlobalClasses":["vcwvzx"]},"label":"MENU LINK"},{"id":"cotzlq","name":"text-basic","parent":"zomviy","children":[],"settings":{"text":"NEWS","_cssGlobalClasses":["oukzbr"]},"label":"MENU LINK HOVER"},{"id":"kogxmf","name":"div","parent":"qxokjy","children":["clucgi","stnfhn"],"settings":{"tag":"a","link":{"type":"internal","postId":"2"},"_cssGlobalClasses":["xjxtnx","ykpwih"]},"label":"MENU ITEM (CONTACT)"},{"id":"clucgi","name":"text-basic","parent":"kogxmf","children":[],"settings":{"text":"CONTACT","_cssGlobalClasses":["vcwvzx"]},"label":"MENU LINK"},{"id":"stnfhn","name":"text-basic","parent":"kogxmf","children":[],"settings":{"text":"CONTACT","_cssGlobalClasses":["oukzbr"]},"label":"MENU LINK HOVER"},{"id":"ffvzdf","name":"div","parent":"zsvfly","children":["fccqyg","cugtsj","ceyvpb","kwjnae"],"settings":{"_cssGlobalClasses":["gpmgqy"]},"label":"IMAGE WRAPPER"},{"id":"fccqyg","name":"div","parent":"ffvzdf","children":["cdgjkg"],"settings":{"_cssGlobalClasses":["esxbfs","wcdbhg"]},"label":"IMAGE HOLDER (Projects)"},{"id":"cdgjkg","name":"image","parent":"fccqyg","children":[],"settings":{"image":{"id":422,"filename":"don-kaveen-F0CTHqaZth0-unsplash-scaled.jpg","size":"full","full":"https://bricksmotion.co/wp-content/uploads/don-kaveen-F0CTHqaZth0-unsplash-scaled.jpg","url":"https://bricksmotion.co/wp-content/uploads/don-kaveen-F0CTHqaZth0-unsplash-scaled.jpg"},"_cssGlobalClasses":["wvvlmh"]},"label":"IMAGE"},{"id":"cugtsj","name":"div","parent":"ffvzdf","children":["djhhnj"],"settings":{"_cssGlobalClasses":["esxbfs","rqggvf"]},"label":"IMAGE HOLDER (About)"},{"id":"djhhnj","name":"image","parent":"cugtsj","children":[],"settings":{"image":{"id":423,"filename":"hi-estudio-vkOzfEPcD2M-unsplash.jpg","size":"full","full":"https://bricksmotion.co/wp-content/uploads/hi-estudio-vkOzfEPcD2M-unsplash.jpg","url":"https://bricksmotion.co/wp-content/uploads/hi-estudio-vkOzfEPcD2M-unsplash.jpg"},"_cssGlobalClasses":["wvvlmh"]},"label":"IMAGE"},{"id":"ceyvpb","name":"div","parent":"ffvzdf","children":["vbzbax"],"settings":{"_cssGlobalClasses":["esxbfs","hllcje"]},"label":"IMAGE HOLDER (News)"},{"id":"vbzbax","name":"image","parent":"ceyvpb","children":[],"settings":{"image":{"id":424,"filename":"simon-lee-zft-W1kVEhg-unsplash.jpg","size":"full","full":"https://bricksmotion.co/wp-content/uploads/simon-lee-zft-W1kVEhg-unsplash.jpg","url":"https://bricksmotion.co/wp-content/uploads/simon-lee-zft-W1kVEhg-unsplash.jpg"},"_cssGlobalClasses":["wvvlmh"]},"label":"IMAGE"},{"id":"kwjnae","name":"div","parent":"ffvzdf","children":["zoifeu"],"settings":{"_cssGlobalClasses":["esxbfs","ykpwih"]},"label":"IMAGE HOLDER (Contact)"},{"id":"zoifeu","name":"image","parent":"kwjnae","children":[],"settings":{"image":{"id":425,"filename":"steve-johnson-tiYNaiIQUag-unsplash-scaled.jpg","size":"full","full":"https://bricksmotion.co/wp-content/uploads/steve-johnson-tiYNaiIQUag-unsplash-scaled.jpg","url":"https://bricksmotion.co/wp-content/uploads/steve-johnson-tiYNaiIQUag-unsplash-scaled.jpg"},"_cssGlobalClasses":["wvvlmh"]},"label":"IMAGE"},{"id":"ejsgmi","name":"section","parent":"nqmwim","children":["rvmrwc"],"settings":{"_cssGlobalClasses":["blxbli"]},"label":"HERO SECTION"},{"id":"rvmrwc","name":"container","parent":"ejsgmi","children":["mnqbiu"],"settings":{"_cssGlobalClasses":["uyulxk"]},"label":"HERO CONTAINER"},{"id":"mnqbiu","name":"heading","parent":"rvmrwc","children":[],"settings":{"text":"Full Screen Menu","tag":"h1","_cssGlobalClasses":["hmxmnl"]},"label":"HEADING"}],"source":"bricksCopiedElements","sourceUrl":"https://bricksmotion.co","version":"1.7.3","globalClasses":[{"id":"jmqpdy","name":"newsletter-signup","settings":{"_position":"fixed","_bottom":"20px","_right":"20px","_padding":{"top":"var(--space-xs)","right":"var(--space-xs)","bottom":"var(--space-xs)","left":"var(--space-xs)"},"_border":{"radius":{"top":"var(--radius-xs)","right":"var(--radius-xs)","bottom":"var(--radius-xs)","left":"var(--radius-xs)"}},"_background":{"color":{"raw":"var(--primary)"}}}},{"id":"vluijm","name":"fs-menu_trigger","settings":{"_position":"absolute","_top":"50px","_right":"100px","_display":"flex","_width":"80px","_height":"80px","_cursor":"pointer","_zIndex":"999","_right:tablet_portrait":"50px","_heightMin":"80px","_widthMin":"80px","_background":{"color":{"raw":"#c2ff2e"}},"_border":{"radius":{"top":"50%","right":"50%","bottom":"50%","left":"50%"}},"_padding":{"top":"0","bottom":"0","right":"0","left":"0"},"_alignSelf":"center","_justifyContent":"center","_alignItems":"center"}},{"id":"euhrfj","name":"fs-menu_wrapper","settings":{"_position":"fixed","_width":"100%","_top":"0","_left":"0","_height":"100%","_display":"flex","_justifyContent":"center","_alignSelf":"center","_alignItems":"center","_cssCustom":".fs-menu_wrapper {\n opacity: 1;\n}","_padding":{"left":"2rem","right":"2rem"},"_overflow":"hidden","_background":{"color":{"hex":"#243300"}}}},{"id":"sbdqvs","name":"fs-menu_container","settings":{"_direction":"row","_justifyContent":"space-between","_position":"relative"}},{"id":"ypwtns","name":"fs-menu_nav","settings":{"_alignSelf":"flex-start","_justifyContent":"flex-start","_alignItems":"flex-start","_display":"flex","_direction":"column","_rowGap":"1rem","_width":"100%","_position":"relative","_zIndex":"2"}},{"id":"xjxtnx","name":"fs-menu_item","settings":{"_position":"relative","_cursor":"pointer","_overflow":"hidden"}},{"id":"wcdbhg","name":"is-projects","settings":{}},{"id":"vcwvzx","name":"fs-menu_link","settings":{"_typography":{"font-size":"14rem","font-family":"Helvetica Neue","line-height":"1","font-weight":"700","text-transform":"uppercase","color":{"hex":"#f7ffe6"}},"_typography:tablet_portrait":{"font-size":"8rem"},"_typography:mobile_portrait":{"font-size":"6rem"}}},{"id":"oukzbr","name":"fs-menu_link--hover","settings":{"_typography":{"font-size":"14rem","font-family":"Helvetica Neue","line-height":"1","font-weight":"700","text-transform":"uppercase","color":{"hex":"#c2ff2e"}},"_position":"absolute","_left":"0","_top":"0","_typography:tablet_portrait":{"font-size":"8rem"},"_typography:mobile_portrait":{"font-size":"6rem"},"_display:tablet_portrait":"none"}},{"id":"rqggvf","name":"is-about","settings":[]},{"id":"hllcje","name":"is-news","settings":[]},{"id":"ykpwih","name":"is-contact","settings":{}},{"id":"gpmgqy","name":"fs-menu_image-wrapper","settings":{"_position":"absolute","_right":"0","_top":"0","_width":"50%","_zIndex":"1","_height":"120%","_overflow":"hidden"}},{"id":"esxbfs","name":"fs-menu_image-holder","settings":{"_display:tablet_portrait":"none","_height":"100%","_width":"100%","_position":"absolute","_top":"0","_left":"0"}},{"id":"wvvlmh","name":"fs-menu_image","settings":{"_objectFit":"cover","_width":"100%","_height":"100%"}},{"id":"blxbli","name":"fs-section","settings":{"_height":"100vh","_alignSelf":"center","_justifyContent":"center","_alignItems":"center"}},{"id":"uyulxk","name":"fs-container","settings":{"_justifyContent":"center","_alignItems":"center","_alignSelf":"center"}},{"id":"hmxmnl","name":"fs-heading","settings":{"_typography":{"font-family":"Helvetica Neue","font-weight":"300"}}}],"globalElements":[]}

Structure & Styling

1. Building and styling the full screen menu

Building the basic NAV structure.

Start by adding a DIV > CONTAINER > DIV + DIV

Give the first DIV a class of .fs-menu_wrapper

Give the CONTAINER a class of .fs-menu_container

Giver the third DIV a class of .fs-menu_nav

Giver the fourth DIV a class of .fs-menu_image-wrapper

You HTML structure schould look like this:

Styling the .fs-menu_wrapper:

display: flex
flex-direction: row
align-self: center
justify-content: center
align-items: center
padding-left: 2rem
padding-right: 2rem
width: 100%
height: 100%
position: fixed
top: 0
left: 0
overflow: hidden
background-color: #000
Custom CSS:

root {
opacity: 1;
}

Styling the .fs-menu_container:

display: flex
flex-direction: row
justify-content: space-between

position: relative

Styling the .fs-menu_nav:

display: flex
flex-direction: column
align-self: top
justify-content: top
align-items: start
row-gap: 1rem
width: 100%
position: relative
z-index: 2

Styling the .fs-menu_image-wrapper:

width: 50%
height: 120%
position: absolute
top: 0
right: 0
z-index: 1
overflow: hidden

Inside of the .fs-menu_nav:

We are now building the Menu LINKS.

We have 4 LINKS in the demo. You can duplicate the .fs-menu_item for every Menu LINK after its build.

We will start with the Menu LINK for Projects.

Add a DIV > TEXT + TEXT

Give the DIV a class of .fs-menu_item and .is-projects ->

NOTE: You can rename the class .is-projects to everything that fits for you. There will be no styling for .is-projects class, as we just need it for the right targeting when it comes to animating it later.

Give the first TEXT a class of .fs-menu_link

Give the second TEXT a class of .fs-menu_link–hover

HTML structure should look like this now:

Styling the .fs-menu_item:

HTML Tag: a (link)
Set you desired target under Link

position: relative
overflow: hidden
pointer: cursor

Styling the .fs-menu_link:

Insert TEXT of you choice. In the demo I am using “Projects”.

The styling is up to you, in the demo I am using:

color: #000
text-transform: uppercase
font-size: 14rem -> 8rem on tablet & mobile landscape, 6rem on mobile potrait
font-family: ‘Helvetice Neue’
font-weight: 700
line-height: 1

Styling the .fs-menu_link–hover:

Insert the same TEXT as in the .fs-menu_link.

Apply the same styling as in the .fs-menu_link, but set a different color:

color: #000

You can now duplicate the .fs-menu_item. Delete the .is-projects class from the duplicates and add classes that fit for you. In the demo I am using:

.is-about
.is-news
.is-contact

You do yourself a favor if you name the HTML elements in the Bricks structure panel.

Full HTML structure should look like this now:

Inside of the .fs-menu_image-wrapper:

We are now building the Menu IMAGES.

We have 4 IMAGES in the demo. You can duplicate the .fs-menu_item for every Menu IMAGE after its build.

We will start with the Menu IMAGE for Projects.

Add a DIV > IMAGE.

Give the DIV a class of .fs-menu_image-holder and a class of .is-projects

NOTE: You can rename the class .is-projects to everything that fits for you. There will be no styling for .is-projects class, as we just need it for the right targeting when it comes to animating it later.

Give the IMAGE a class of .fs-menu_image

HTML structure should look like this:

Styling the .fs-menu_image-wrapper:

width: 50%
height: 120%
position: absolute
top: 0
right 0
z-index: 1
overflow: hidden

Styling the .fs-menu_image-holder:

width: 100%
height: 100%
position: absolute
top: 0
left: 0

Styling the .fs-menu_image:

Add an IMAGE of your choice

object-fit: cover
width: 100%
height: 100%

You can now duplicate the .fs-menu_image-holder. Delete the .is-projects class from the duplicates and add classes that fit for you. In the demo I am using:

.is-about
.is-news
.is-contact

That’s it for the NAV structure and styling.

Change the display property in the .fs-menu_wrapper class to display: none, so its not overlaying the rest of the page in the builder. You will switch to display: flex again, when you are finished.

HTML structure should look like this:

2. Building and styling the Hero Section and Menu Trigger

We will start with the Hero Section:

Add a SECTION > CONTAINER > HEADING

Give the SECTION a class of .fs-section

Give the CONTAINER a class of .fs-container

Giver the HEADING a class of .fs-heading

Styling the .fs-section:

display: flex
align center on all axis
height: 100vh

Styling the .fs-container:

display: flex
align center on all axis

Styling the .fs-heading:

fill in text of you choice
HTML Tag: H1
font-family: ‘Helvetica Neue’
font-weight: 300

Building the Menu Trigger:

Add a BUTTON and give it a class of .fs-menu_trigger

HTML Tag: button
text: none
style: none

set an icon of your choice in my case I am using the “X” icon from the Themify library

gap: 0

padding: 0
width: 80px
height: 80px
min-width: 80px
min-height: 80px
position: absolute
top: 50px
right: 100px
z-index: 999
display: flex
flex-direction: column
align center on all axis
background-color: #c2ff2e
border-radius: 50%

HTML Structure should look like this now:

Great! Everything HTML and CSS wise is set up. Now we can jump into the fun part.

GSAP with Bricksforge

We will build the animations in 4 steps:

  1. Setting up an Event
  2. Menu reveal animation
  3. Nav Link animation
  4. Nav Link Image animation

You can set the opacity of .fs-menu_wrapper to 1, so you can see what you build.

1. Setting up an EVENT on Pageload

Open the Bricksforge Panel -> EVENTS -> create a new EVENT. Give the EVENT a descriptive name e.g. [FS] SET – Links & Wrapper.

Event: On Pageload (DOMContentLoaded)

Add an ACTION in the ACTIONS TAB -> GSAP Set

In the ACTIONS SETTINGS TAB:

Target Element: Custom (Document QuerySelector)
Input: .fs-menu_link .fs-menu_link–hover
JavaScript Object: {transformPerspective: 400}

Add another ACTION in the same EVENT. Again GSAP Set.

In the ACTIONS SETTINGS TAB:

Target Element: Custom (Document QuerySelector)
Input: .fs-menu_wrapper
JavaScript Object: {autoAlpha: 0, scaleX: 0.001, scaleY: 0, borderRadius: 150}

2. Menu reveal animation

Go to TIMELINES add a new TIMELINE and give it a descriptive name e.g. [FS] Menu reveal

In the SETTINGS TAB:

Trigger: Click
Trigger Selector: .fs-menu_trigger
With secondary click: ON

The TIMELINE consists of 6 different ANIMATIONS.

In the ANIMATIONS TAB add a new ANIMATION:

Fade the HEADING out when .fs-menu_trigger is clicked.

Selector to animate: .fs-heading
Method: to

TranslateY: 10%
Opacity: 0

Duration: 0.3s
Delay: 0
Ease: power3.out

Add another ANIMATION:

Set the autoAlpha to 1, so the opacity is 1 and visibility is set to visible

autoAlpha is great, because it automatically sets opacity and visibility.

Selector to animate: .fs-menu_wrapper
Method: to

Animation Object: {autoAlpha: 1}

Duration: 0.3s
Delay: 0
Ease: power3.out

Add another ANIMATION:

Setting the scale on the Y axis to 1, so we get the thin vertical line.

Selector to animate: .fs-menu_wrapper
Method: to

Scale X Axis: 0.001
Scale Y Axis: 1

Duration: 0.4s
Delay: 0
Ease: power3.out

Add another ANIMATION:

Setting the scale on X axis to 1, so the Menu spans the whole width + we set the border-radius to 0.

Selector to animate: .fs-menu_wrapper
Method: to

Animation Object: {borderRadius: 0}

Scale X Axis: 1
Scale Y Axis: 1

Duration: 0.4s
Delay: 0
Ease: power3.out

Add another ANIMATION:

Letting the LINKS fade in.

Selector to animate: .fs-menu_link
Method: from

Opacity: 0
Blur: 25

Duration: 0.5s
Delay: 0
Ease: power2.out

Use Stagger: ON
Stagger: 0.08

Add another ANIMATION:

Turning the MENU trigger 45deg on the Z axis so it turns to a cross.

Selector to animate: .fs-menu_trigger
Method: from

Rotate Z axis: 45deg

Duration: 0.2s
Delay: 0
Ease: power3.out

OK. Menu reveal animation is done.

2. Nav Link animation

Go to TIMELINES add a new TIMELINE and give it a descriptive name e.g. [FS] Nav Item – Hover

In the SETTINGS TAB:

Match Media Rule: (min-width: 786px)
Trigger: Hover
Trigger Selector: .fs-menu_item
Handle triggers separately: ON
Reverse on mouse leave: ON

The TIMELINE consists of 2 different ANIMATIONS.

In the ANIMATIONS TAB add a new ANIMATION:

Rattle the .fs-menu_link–hover in on hover.

Child Selector: .fs-menu_link–hover
Method: From to

In the FROM TAB:

Animation Object: {transformPerspective: 400}

Translate Y axis: 90%
Rotate X axis: -140deg

Duration: 0.5s
Delay: 0
Ease: power2.out

Use SplitText: ON
Type: Chars

Use Stagger: ON
Stagger: 0.05

In the TO TAB:

Animation Object: {transformPerspective: 400}

Translate Y axis: 0%
Rotate X axis: 0deg

Duration: 0.5s
Delay: 0
Ease: power2.out

Use SplitText: ON
Type: Chars

Use Stagger: ON
Stagger: 0.05

Add another ANIMATION:

Rattle the .fs-menu_link out on hover.

Child Selector: .fs-menu_link
Method: From to

In the FROM TAB:

Animation Object: {transformPerspective: 400}

Duration: 0.5s
Delay: 0
Ease: power2.out

Use SplitText: ON
Type: Chars

Use Stagger: ON
Stagger: 0.05

In the TO TAB:

Animation Object: {transformPerspective: 400}

Translate Y axis: -100%
Rotate X axis: 140deg

Duration: 0.5s
Delay: 0
Ease: power2.out
Position: Custom
Input: 0.05

Use SplitText: ON
Type: Chars

Use Stagger: ON
Stagger: 0.05

2. Nav Image animation

We will create 4 TIMELINES for each IMAGE.

Go to TIMELINES add a new TIMELINE and give it a descriptive name e.g. [FS] Nav Item – Image (Projects)

In the SETTINGS TAB:

Match Media Rule: (min-width: 786px)
Trigger: Hover
Trigger Selector: .fs-menu_item.is-projects
Reverse on mouse leave: ON

In the ANIMATIONS TAB add a new ANIMATION:

Selector to animate: .fs-menu_image-holder.is-projects
Method: From to

In the FROM TAB:

Animation Object: {transformPerspective: 800}

Translate X axis: 50%
Rotate X axis: -45deg
Opacity: 0

Duration: 0.5s
Delay: 0
Ease: power1.inOut

In the TO TAB:

Animation Object: {transformPerspective: 800}

Translate Y axis: 0%
Rotate X axis: 0deg
Opacity: 1

Duration: 0.5s
Delay: 0
Ease: power1.inOut

You can duplicate the TIMELINE and set the correct TRIGGER and SELECTOR TO ANIMATE. The TRIGGER and the SELECTOR TO ANIMATE have to match the CSS classes you added to your .fs-menu_item and .fs-menu_image-holder classes. In the demo I used:

.is-projects
.is-about
.is-news
.is-contact

DONE!

More Tutorials