Scrollable Slider With Scrolling Text Box

How To
1

Can the native Bricks Slider elements create a slider like the one on this page: scrolling slider

  • The slide is mouse scroll activated
  • Each slide has a text box that scrolls down independent of the slide
  • Each slide also has a text title at the bottom of the slide
  • There is also a fixed overlay that stays in place during scrolling

Suggestions welcome,

Thanks.

2

this is scrolltrigger with pinned container

1 Like
3

@sinanisler Is correct, you can accomplish this without using the nestable slider. Try the Bricksforge plugin, you can build GSAP timelines within the builder visually making it pretty easy once you get the hang of it.

My homepage uses a similar GSAP setup underneath my hero section: https://pixflow.co.uk

1 Like
4

Bricksforge looks very reasonably priced - but other than GSAP timelines do you use for anything else? I see the GSAP animations can be coded directly into Bricks.

5

Yes, Pro forms is my go to for any form. I also use the smooth scroller (you can choose GSAP or Lenis). The option element, where you can easily output data from the database. Backend designer, Terminal, Email designer, Form submissions. Bricksforge and Advanced Themer in my opinion are two must have plugins for Bricks.

1 Like
6
1 Like
7

On your homepage slider did you make the ‘slides’ sticky to achieve that effect?

8

Yes, the section has a height of 300vh, each slide wrapper has a height of 100vh and position sticky. Then using GSAP the slides scale down, and lose opacity on scroll position.

1 Like
9

Did you have to set and reset z index to achieve the overlap?

10

Yes, for z-index, the first slide is assigned as 1, the second as 2, and the third as 3. Additionally, the slide wrapper requires pointer-events: none, while the individual slide should have pointer-events: all. Failing to set this up properly may result in the empty space of the next slide’s wrapper blocking clicks on the slide underneath, particularly if it’s partially scrolled.

1 Like