ScrollOut 2.2 is released with better control over variables and support for parallax!

What's new?

  • The cssProps property can now opt-in to particular css variables
  • CSS Variables have been added to track how much percentage-wise a scrolling element has been scrolled
  • CSS Variables have been added to help with parallax
  • The codebase has been converted to TypeScript to make it more robust
  • All dom changes for all instances are bulk written on requestAnimationFrame at once
  • fixed minor bugs

Opt-in to CSS Variables

Having access to all these CSS Variables is amazing! However, changing twenty of them every tick is not always performant 😀. In ScrollOut 2.2, you can opt into specific variables like so:

    cssProps: {
       visibleY: true // <- any css variable in camelCase

Scroll Percent Variables

In ScrollOut 2.2, the ability to tie CSS animations to scroll position has been brought in as --scroll-percent-x and --scroll-percent-y! These decimals between 0 and 1 represent the percent/ratio that the scrolling element has been scrolled. In other words, if the body has been scrolled 50% of the way vertically, the element will have --scroll-percent-y: 0.5 assigned to it. Because CSS Variables cascade, all of the child elements will have this value as well.

Here is just one interesting effect you can accomplish with this new variable:

You can also do parallax backgrounds with it as well!

Parallax Elements

A common scrolling effect on the web is parallax. The question is, "how can we do this with CSS Variables?" In ScrollOut 2.2, --viewport-x and --viewport-y have been added to assist with this. These variables are decimals between -1 and 1 with 0 being the middle value. The way this works is you place your elements normally. Because the top half of the viewport is between -1 and 0, you can use this with calc() and transform to offset your element by a negative y value. Here is a working example from the @keyframers using the viewport variables for fading in text as they move through the viewport

These variables are good for parallax effects on content in the page.

Where can I learn more?

The documentation site is the best place to get started. If you have a question or if something isn't working quite the way you expect, head over and create a GitHub Issue.

One last thing... if you like what we are doing, make sure to star the github respository! Open Source projects are powered by stars and developers like you. Show us your appreciation by clicking that little button like these fine folks

1,479 8 23