In this premium tutorial, we'll walk through how to create an expanding scroll effect, similar to those seen on this Macbook Pro Page, using basicScroll to manipulate element styles in Oxygen, expanding sections and other effects as we scroll.
These types of full page animations controlled by the user scrolling aren't for everybody. It's an extreme effect taking over the whole page, but works as a great example for showing how basicScroll can manipulate CSS properties & helping to understand more about how to implement.
There is a similar effect found on this Mavic Mini product page that can be achieved with a similar method.
Note - this is a detailed (advanced) walkthrough that doesn't just show how to recreate the effects in the demo, but attempts to explain a few concepts along the way regarding animating CSS properties, calculations with CSS variables, tips on scroll performance in the browser & configuring basicScroll.
If you're looking for a simple way to implement scroll effects in Oxygen, this is probably not for you.
It's a bit of long read, but it's a complicated effect to get right. I didn't set out to write an essay, but there are a few ways to get it wrong, which we'll go through some of them. I learned a few things along the way, hopefully you will too while following along.
There are four main parts to understand to create the effect.
- Creating the 'paused scrolling' effect on a section to allow scrolling time for animations to occur.
- Setting triggers to start/stop animations relative to this part of the page.
- Choosing the CSS properties to animate for best results creating the effects.
- Implementing it all with basicScroll's options in Oxygen
Pausing the Scrolling
To create the illusion of the scrolling being paused on a particular section is quite simple.
First we need to wrap the section in a div. Then add some classes to both the container div and the section. The new container div can be 'section-container' and the section can be 'expanding-section'.
The CSS needed to make our expanding section stick to the viewport as the user scrolls is then this;