• CSS
  • GSAP
  • BF

Horizontal Scroll Snap

DEMO: https://bricksmotion.co/demos/horizontal-scroll-snap/
Copy Bricks structure
{"content":[{"id":"nvmenc","name":"div","parent":0,"children":["dksrls","wpugwf","dufkgj","urxftu"],"settings":{},"label":"COPY WRAPPER"},{"id":"dksrls","name":"section","parent":"nvmenc","children":["vxhwdj"],"settings":{"_cssGlobalClasses":["fhcppl"]},"label":"HERO SECTION"},{"id":"vxhwdj","name":"container","parent":"dksrls","children":["ewsdmo"],"settings":{"_direction":"row","_justifyContent":"center","_alignItems":"flex-end"}},{"id":"ewsdmo","name":"heading","parent":"vxhwdj","children":[],"settings":{"text":"Horizontal Scroll Snap","tag":"h1","_typography":{"font-size":"10rem","font-weight":"200","line-height":"1","font-family":"Helvetica Neue","text-align":"center","color":{"hex":"#d0b3ff"}},"_typography:mobile_portrait":{"font-size":"4rem"}}},{"id":"wpugwf","name":"div","parent":"nvmenc","children":["igwuna"],"settings":{"_cssGlobalClasses":["wjsmuz"]},"label":"SCROLL TRIGGER"},{"id":"igwuna","name":"div","parent":"wpugwf","children":["lzqpxg","utebvr","pcsgrr"],"settings":{"_cssGlobalClasses":["qhimtv"],"_direction:tablet_portrait":"column"},"label":"SCROLL WRAPPER"},{"id":"lzqpxg","name":"section","parent":"igwuna","children":["rqerrv"],"settings":{"_cssGlobalClasses":["fxvooy","usqore"],"_background":{"color":{"hex":"#6300ff"}}},"label":"SECTION 1"},{"id":"rqerrv","name":"container","parent":"lzqpxg","children":["anckje"],"settings":{}},{"id":"anckje","name":"heading","parent":"rqerrv","children":[],"settings":{"text":"Section #1","tag":"h1","_typography":{"font-weight":"200","font-family":"Helvetica Neue","font-size":"10rem","color":{"hex":"#e8ffb3"},"line-height":"1","text-align":"left"},"_typography:mobile_portrait":{"font-size":"4rem"}}},{"id":"utebvr","name":"section","parent":"igwuna","children":["iskojp"],"settings":{"_cssGlobalClasses":["fxvooy"],"_background":{"color":{"hex":"#243300"}}},"label":"SECTION 2"},{"id":"iskojp","name":"container","parent":"utebvr","children":["vzujrh"],"settings":[]},{"id":"vzujrh","name":"heading","parent":"iskojp","children":[],"settings":{"text":"Section #2","tag":"h2","_typography":{"font-weight":"200","font-family":"Helvetica Neue","font-size":"10rem","color":{"hex":"#d0b3ff"}},"_typography:mobile_portrait":{"font-size":"4rem"}}},{"id":"pcsgrr","name":"section","parent":"igwuna","children":["dfalji"],"settings":{"_cssGlobalClasses":["fxvooy"],"_background":{"color":{"hex":"#efe6ff"}}},"label":"SECTION 3"},{"id":"dfalji","name":"container","parent":"pcsgrr","children":["fajuvg"],"settings":[]},{"id":"fajuvg","name":"heading","parent":"dfalji","children":[],"settings":{"text":"Section #3","tag":"h1","_typography":{"font-size":"10rem","font-weight":"200","line-height":"1","font-family":"Helvetica Neue","text-align":"left","color":{"hex":"#6300ff"}},"_typography:mobile_portrait":{"font-size":"4rem"}}},{"id":"dufkgj","name":"section","parent":"nvmenc","children":["ruzvys"],"settings":{"_cssGlobalClasses":["brreac"]},"label":"FOOTER SECTION"},{"id":"ruzvys","name":"container","parent":"dufkgj","children":["dexsrh"],"settings":{"_direction":"row","_justifyContent":"center","_alignItems":"flex-end"}},{"id":"dexsrh","name":"heading","parent":"ruzvys","children":[],"settings":{"text":"Horizontal Scroll Snap","tag":"h1","_typography":{"font-size":"10rem","font-weight":"200","line-height":"1","font-family":"Helvetica Neue","text-align":"center","color":{"hex":"#243300"}},"_typography:mobile_portrait":{"font-size":"4rem"}}},{"id":"urxftu","name":"div","parent":"nvmenc","children":["ollskp"],"settings":{"_cssGlobalClasses":["dibypn"],"tag":"a","link":{"type":"internal","postId":"227"}}},{"id":"ollskp","name":"text-basic","parent":"urxftu","children":[],"settings":{"text":"TUTORIAL","_cssGlobalClasses":["aksaka"]}}],"source":"bricksCopiedElements","sourceUrl":"https://bricksmotion.co","version":"1.7.3","globalClasses":[{"id":"fhcppl","name":"hero-section","settings":{"_alignSelf":"center","_justifyContent":"center","_alignItems":"center","_height":"100vh","_background":{"color":{"hex":"#243300"}}}},{"id":"wjsmuz","name":"h-scroll_trigger","settings":{"_overflow":"hidden"}},{"id":"qhimtv","name":"h-scroll_wrapper","settings":{"_display":"flex","_direction:mobile_portrait":"column","_alignSelf:mobile_portrait":"flex-start"}},{"id":"fxvooy","name":"h-scroll_section","settings":{"_width":"100%","_flexShrink":"0","_justifyContent":"center","_alignItems":"center","_alignSelf":"center","_height":"100vh","_heightMax":"100vh"}},{"id":"brreac","name":"footer-section","settings":{"_background":{"color":{"raw":"#d0b3ff"}},"_height":"100vh","_direction":"column","_justifyContent":"center","_alignItems":"center","_alignSelf":"center"}},{"id":"dibypn","name":"tutorial-link_wrapper","settings":{"_position":"fixed","_top":"10px","_right":"10px","_padding":{"top":"var(--space-s)","right":"var(--space-s)","bottom":"var(--space-s)","left":"var(--space-s)"},"_background":{"color":{"raw":"var(--secondary)"}}}},{"id":"aksaka","name":"tutorial-link","settings":{"_typography":{"color":{"raw":"var(--secondary-ultra-dark)"}}}}],"globalElements":[]}
Download Horizontal Scroll Snap - MAIN
Download Horizontal Scroll Snap - Section Start- Text
Download Horizontal Scroll Snap - Section #2 - Text
{"content":[{"id":"nvmenc","name":"div","parent":0,"children":["dksrls","wpugwf","dufkgj","urxftu"],"settings":{},"label":"COPY WRAPPER"},{"id":"dksrls","name":"section","parent":"nvmenc","children":["vxhwdj"],"settings":{"_cssGlobalClasses":["fhcppl"]},"label":"HERO SECTION"},{"id":"vxhwdj","name":"container","parent":"dksrls","children":["ewsdmo"],"settings":{"_direction":"row","_justifyContent":"center","_alignItems":"flex-end"}},{"id":"ewsdmo","name":"heading","parent":"vxhwdj","children":[],"settings":{"text":"Horizontal Scroll Snap","tag":"h1","_typography":{"font-size":"10rem","font-weight":"200","line-height":"1","font-family":"Helvetica Neue","text-align":"center","color":{"hex":"#d0b3ff"}},"_typography:mobile_portrait":{"font-size":"4rem"}}},{"id":"wpugwf","name":"div","parent":"nvmenc","children":["igwuna"],"settings":{"_cssGlobalClasses":["wjsmuz"]},"label":"SCROLL TRIGGER"},{"id":"igwuna","name":"div","parent":"wpugwf","children":["lzqpxg","utebvr","pcsgrr"],"settings":{"_cssGlobalClasses":["qhimtv"],"_direction:tablet_portrait":"column"},"label":"SCROLL WRAPPER"},{"id":"lzqpxg","name":"section","parent":"igwuna","children":["rqerrv"],"settings":{"_cssGlobalClasses":["fxvooy","usqore"],"_background":{"color":{"hex":"#6300ff"}}},"label":"SECTION 1"},{"id":"rqerrv","name":"container","parent":"lzqpxg","children":["anckje"],"settings":{}},{"id":"anckje","name":"heading","parent":"rqerrv","children":[],"settings":{"text":"Section #1","tag":"h1","_typography":{"font-weight":"200","font-family":"Helvetica Neue","font-size":"10rem","color":{"hex":"#e8ffb3"},"line-height":"1","text-align":"left"},"_typography:mobile_portrait":{"font-size":"4rem"}}},{"id":"utebvr","name":"section","parent":"igwuna","children":["iskojp"],"settings":{"_cssGlobalClasses":["fxvooy"],"_background":{"color":{"hex":"#243300"}}},"label":"SECTION 2"},{"id":"iskojp","name":"container","parent":"utebvr","children":["vzujrh"],"settings":[]},{"id":"vzujrh","name":"heading","parent":"iskojp","children":[],"settings":{"text":"Section #2","tag":"h2","_typography":{"font-weight":"200","font-family":"Helvetica Neue","font-size":"10rem","color":{"hex":"#d0b3ff"}},"_typography:mobile_portrait":{"font-size":"4rem"}}},{"id":"pcsgrr","name":"section","parent":"igwuna","children":["dfalji"],"settings":{"_cssGlobalClasses":["fxvooy"],"_background":{"color":{"hex":"#efe6ff"}}},"label":"SECTION 3"},{"id":"dfalji","name":"container","parent":"pcsgrr","children":["fajuvg"],"settings":[]},{"id":"fajuvg","name":"heading","parent":"dfalji","children":[],"settings":{"text":"Section #3","tag":"h1","_typography":{"font-size":"10rem","font-weight":"200","line-height":"1","font-family":"Helvetica Neue","text-align":"left","color":{"hex":"#6300ff"}},"_typography:mobile_portrait":{"font-size":"4rem"}}},{"id":"dufkgj","name":"section","parent":"nvmenc","children":["ruzvys"],"settings":{"_cssGlobalClasses":["brreac"]},"label":"FOOTER SECTION"},{"id":"ruzvys","name":"container","parent":"dufkgj","children":["dexsrh"],"settings":{"_direction":"row","_justifyContent":"center","_alignItems":"flex-end"}},{"id":"dexsrh","name":"heading","parent":"ruzvys","children":[],"settings":{"text":"Horizontal Scroll Snap","tag":"h1","_typography":{"font-size":"10rem","font-weight":"200","line-height":"1","font-family":"Helvetica Neue","text-align":"center","color":{"hex":"#243300"}},"_typography:mobile_portrait":{"font-size":"4rem"}}},{"id":"urxftu","name":"div","parent":"nvmenc","children":["ollskp"],"settings":{"_cssGlobalClasses":["dibypn"],"tag":"a","link":{"type":"internal","postId":"227"}}},{"id":"ollskp","name":"text-basic","parent":"urxftu","children":[],"settings":{"text":"TUTORIAL","_cssGlobalClasses":["aksaka"]}}],"source":"bricksCopiedElements","sourceUrl":"https://bricksmotion.co","version":"1.7.3","globalClasses":[{"id":"fhcppl","name":"hero-section","settings":{"_alignSelf":"center","_justifyContent":"center","_alignItems":"center","_height":"100vh","_background":{"color":{"hex":"#243300"}}}},{"id":"wjsmuz","name":"h-scroll_trigger","settings":{"_overflow":"hidden"}},{"id":"qhimtv","name":"h-scroll_wrapper","settings":{"_display":"flex","_direction:mobile_portrait":"column","_alignSelf:mobile_portrait":"flex-start"}},{"id":"fxvooy","name":"h-scroll_section","settings":{"_width":"100%","_flexShrink":"0","_justifyContent":"center","_alignItems":"center","_alignSelf":"center","_height":"100vh","_heightMax":"100vh"}},{"id":"brreac","name":"footer-section","settings":{"_background":{"color":{"raw":"#d0b3ff"}},"_height":"100vh","_direction":"column","_justifyContent":"center","_alignItems":"center","_alignSelf":"center"}},{"id":"dibypn","name":"tutorial-link_wrapper","settings":{"_position":"fixed","_top":"10px","_right":"10px","_padding":{"top":"var(--space-s)","right":"var(--space-s)","bottom":"var(--space-s)","left":"var(--space-s)"},"_background":{"color":{"raw":"var(--secondary)"}}}},{"id":"aksaka","name":"tutorial-link","settings":{"_typography":{"color":{"raw":"var(--secondary-ultra-dark)"}}}}],"globalElements":[]}

Structure & Styling

NOTE: You can copy the Bricks Structure if you don’t want to rebuild this.

1. HERO SECTION, HORIZONTAL SCROLL SECTIONS, FOOTER SECTION

Start by adding 5 SECTIONS to a blank page. Name them as you like. In this case I am using:

  • HERO SECTION
  • SECTION 1, SECTION 2, SECTION 3
  • FOOTER SECTION

HERO SECTION

Add a class of .hero-section to your HERO SECTION and add following styles:

height: 100vh
background-color: #243300 or as you like

Add a CONTAINER inside of .hero-section and inside the CONTAINER add a HEADING.

You can style the HEADING as you like. In my case I am using:

#d0b3f for the text-color

All HEADINGS have a font-size of 10rem

HORIZONTAL SCROLL SECTIONS

Give SECTION 1, SECTION 2 and SECTION 3 a class of .h-scroll_section and add following styles:

flex: center it on all axis
flex-shrink: 0 <- IMPORTANT
width: 100%
height: 100vh
max-height: 100vh -> to prevent the SECTIONS to go over 100vh.

You can add a background-color to each SECTION on the ID level.

In this case I am using:

SECTION 1: #6300ff
SECTION 2: #243300
SECTION 3: #efe6ff

Add a CONTAINER to each .h-scroll_section and inside each CONTAINER add a HEADING.

You can style the HEADINGS as you like. In my case I am using:

SECTION 1 – HEADING: #e8ffb3
SECTION 2 – HEADING: #d0b3ff
SECTION 3 – HEADING: #6300ff

All HEADINGS have a font-size of 10rem

FOOTER SECTION

Give the FOOTER SECTION a class of .footer-section and add following styles:

height: 100vh
background-color: #d0b3ff <- or as wanted

Add a CONTAINER inside of .footer-section and inside the CONTAINER add a HEADING.

You can style the HEADING as you like. In my case I am using:

#243300 for the text-color

All HEADINGS have a font-size of 10rem

Your structure should now look like this:

2. HORIZONTAL SCROLL WRAPPER & TRIGGER

HORIZONTAL SCROLL WRAPPER

Create a DIV and give it a class of .h-scroll_wrapper. Add following styles:

display: flex
flex-direction: horizontal (row)

Insert all SECTIONS with a class .h-scroll_section inside of .h-scroll_wrapper

HORIZONTAL SCROLL TRIGGER

Create a DIV and give it a class of .h-scroll_trigger. Add following styles:

overflow: hidden

Insert .h-scroll_wrapper inside of .h-scroll_trigger.

Your structure should now look like this:

GSAP with Bricksforge

NOTE: You can download the “Horizontal Scroll Snap – MAIN” Timeline if you don’t want to rebuild this.

Ok, as we have the HTML structure and styling set up, we will now build the horizontal scroll animation including snap and pin.

Open the Bricksforge Panel. Click on Timelines and add a new Timeline. Give the Timeline a descriptive name like: Horizontal Scroll Snap.

Assign the following settings in the Settings Column:

Trigger: ScrollTrigger

Trigger Selector: .h-scroll_trigger

Handle triggers separately: ON

Scroll Start: top 0%

Scroll End: top -200%

Use Scrub: ON

Smooth Scrub Value:0

Use Pin:ON

For Selector:.h-scroll_trigger

Pin Spacing:ON

Use Snap:ON

Snap To:0.5

Why 0.5? We will have 2 SECTIONS that will scroll horizontal. SECTION #1 is the starting SECTION (0%). SECTION #2 is the first SECTION to scroll (-100%) and SECTION #3 ist the second SECTION to scroll (-200%). So if -200% equals the full horizontal scroll width, -100% would represent the half of it, which leads the a value of 0.5. If we would have 3 SECTIONS to scroll the total scroll width would be -300%, so each SECTION would be a third, which would lead to a value of 0.333333.

Snap Duration:0.5

Snap Delay:0

Snap Ease:default

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

Method: To

In the To Tab:

Transalte X: -200%

ADDITIONAL: Set an entrance animation of each horizontal scroll section.

NOTE: You can download the “Horizontal Scroll Snap – Section Start – Text” Timeline if you don’t want to rebuild this.

FIRST SECTION:

Open the Bricksforge Panel. Click on Timelines and add a new Timeline. Give the Timeline a descriptive name like: Horizontal Scroll Snap – Section #1 – Text.

Assign the following settings in the Settings Column:

Trigger: ScrollTrigger

Trigger Selector: #brxe-lzqpxg -> ID or CLASS of Section #1

Scroll Start: -20% top

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

Method: From

In the From Tab:

Selector to animate: #brxe-anckje -> ID or CLASS of your HEADING in SECTION #1
Translate Y: 20px
Opacity: 0
Duration: 0.5
Delay: 0.3
Ease: power1.in

NOTE: You can download the “Horizontal Scroll Snap – Section#2 – Text” Timeline if you don’t want to rebuild this.

FOLLOWING SECTIONS:

Open the Bricksforge Panel. Click on Timelines and add a new Timeline. Give the Timeline a descriptive name like: Horizontal Scroll Snap – Section #2 – Text.

Assign the following settings in the Settings Column:

Trigger: ScrollTrigger

Trigger Selector: #brxe-lzqpxg -> ID or CLASS of Section #1

Scroll Start: +=100% top

Scroll End: +=100% top

Method: From

In the From Tab:

Selector to animate: #brxe-utebvr -> ID or CLASS of your HEADING in SECTION #1
Translate Y: 20px
Opacity: 0
Duration: 0.5
Delay: 0.3
Ease: power1.in

Duplicate this Animation for each Scroll Section.

More Tutorials