This Pro tutorial provides the steps to implement Focus Section, an Oxygen's composite element in Bricks.
As the focus section comes into the view, it zooms in smoothly with the other sections fading out and as it leaves the viewport, zooms out to its original size with the section below fading in.
We shall clean up the IntersectionObserver API's code and make it simpler and modern.
Step 1
Edit your Page/template with Bricks editor and add a few Sections.
In my test site, I added three - one above the focus section and one below it.
Add a class of focus-section to your focus section.
Add a Block inside the Section's Container.
Add a class of focus-section__content to this Block. Add your desired elements inside like perhaps a Heading and a Container having some columns.
Step 2
At Bricks → Settings → Custom code → Body (footer) scripts, add:
