ScrollStory

ScrollStory as part of Kodhus JS components create awesome effects based on the scroll position.

Example

ScrollStory initializes your page so that, each element can have some sort of an animation/transition based on the scroll position (when you scroll the page).

Basically it asks for the desired transition properties at desired scroll position of the page.

To better understand what it does, see the following example and start scrolling.

As you can see, when scrolling, the first picture scrolls normally and then when the top of the second section (gray section) reaches the top of the screen, it will stay in its place and the element inside it which is the blue box will start animating from right to left. After that animation is finished (scrollbar reaches to a certain position), then it will scroll normally again.


Usage

To use ScrollStory, you need to initialize it and pass an object with all the items and their desired state based on the scrollPosition (define the story of your page).

Checkout the following code:

        const scroll = new KScroll();
scroll.init({
  items: [
    {
      selector: '.first',
      frames: [
        {
          scrollPosition: '0%',
          styles: "transform:translate(0,0%);"
        },
        {
          scrollPosition: '100%',
          styles: "transform:translate(0,-100%);"
        }
      ]
    },
    {
      selector: '.second',
      frames: [
        {
          scrollPosition: '0%',
          styles: "transform:translate(0,100%);"
        },
        {
          scrollPosition: '100%',
          styles: "transform:translate(0,0%)"
        },
        {
          scrollPosition: '250%',
          styles: ""
        },
        {
          scrollPosition: '350%',
          styles: "transform:translate(0,-100%)"
        }
      ]
    },
    {
      selector: '.third',
      frames: [
        {
          scrollPosition: '250%',
          styles: "transform:translate(0,100%);"
        },
        {
          scrollPosition: '350%',
          styles: "transform:translate(0,0%);"
        }
      ]
    },
    {
      selector: '.scroll-inside',
      frames: [
        {
          scrollPosition: '100%',
          styles: "width:0%;"
        },
        {
          scrollPosition: '250%',
          styles: "width:100%"
        }
      ]
    }
  ]
});
    

As you can see you need to pass an object with the key items which will hold all the elements of the page in it with their desired states based on the scroll position. As you can see each of those iems, have a selector key which is the selector of that element in html, and then each item has a frames key with all the keyframes (that's how we call them), and in each keyframe, you define the css properties that need to be set for that scroll position, and ScrollStory will interpolate the values in between.

scrollPosition takes a string of either percentage or px value. Percentage value is the percentage of the height of the viewport. for example '100%' means that when the scroll position is at the end of the viewport and 250% means that when the scroll position is at the position of 2.5 times the viewpoint height meaning when you scrolled as much as 2 viewport heights and half.