russellsamora / scrollama Goto Github PK

Hi! Been playing around with scrollama and couldn't figure out if its possible to do a scroll bound animation with greensock?

I've managed to get it to work with the 'onStepEnter/onStepExit' but that plays the animation immediately. Also with this scenario, if i were to scroll up and down a couple of times, the animation will continue to replay the number of times it was scrolled.

Here's my codepen:
link

Not entirely sure if this is the best implementation of gsap with scrollama. Any insight will be much appreciated! Thank you

Just a trifle, still: in the Readme the license is MIT, while in the file is Apache v2.

It appears that if any part of a step element is below the viewport at the point that it is triggered, the progress response goes from 0 to 1 immediately. Chrome, IE, Safari all handle this fine however.

Could be something I'm missing, but I created a quick codepen for it. (Check it out in Firefox Quantum) https://codepen.io/jakecrump/pen/wpdGXZ

(Also, the codepen preview in Firefox is a little finicky and you may have to refresh a couple times to get it to trigger at all)

Hey, I'd like to suggest an additional callback: onContainerProgress with the response.progress variable indicating the scrolling progress in relation to the total container height.

Since we know the container element, and the logic for onStepProgress is already there, I'm guessing this could be pretty straightforward to implement.

For now I've managed to work around it, using onStepProgress callbacks:
https://codepen.io/21sieben/pen/mXZJZJ (debug view only, see #38 )

• new color outlines for rootMargin of each step that matches step border
• verbose option that console logs details

With HMR, a component is loaded twice and if that component includes scrollama, it'll be initiated twice.
How can I destroy an instance (so all events are cleaned up and everything)?
Looking for something like

scroller.destroy();

Is it possible to create different offsets for the steps of a Scrollama instance? This seems impossible with the way it is setup now.

Hi there! This is awesome!

Given the spotty browser support for Intersection Observer, I might recommend include a version with the polyfill baked in, or mentioning it in the docs and pointing people to it.

Would be nice to get some browser support info in the readme, too.

If you want my help in any way with this, please just let me know and I'll fork and PR.

• 0: step triggers event on static graphic, responsive on mobile - example
• 1: fixed graphic with step triggers, responsive on mobile - example
• 2: fixed graphic with step triggers, stacked on mobile - example
• 3: fixed graphic with progress based triggers, responsive on mobile - example
• 4: sticky graphic pattern with step triggers, responsive on mobile - example

http://documentation.js.org/

Is there a way to manage viewport jumps that were implemented by #30 ?

Take this scenario for example: If you load the page at step 5 (scrolled half way down a page), step 5's onStepEnter get's triggered, but then so do all of the other steps above. These don't fire in order, so we get step 5, then 4, 3, 2, 1. In my case, I have effects in step 5 that is undone by previous steps.

Some possible solutions:

• Could we make a current step indicator available? You could use this in some of the logic that fires during the onStepEnter callback.
• Could we apply these steps in order? Although then you'd be running through the whole app each time you reload it.
• Can we have the ability to turn off "backfilling" the steps?

If there is already a way around this and I've missed it, could you please let me know?

Would love to hear your thoughts. Thanks!

In your How to use readme.
const scroller = Scrollama();

Using capitcal S for Scrollama gives me an error saying Scrollama not found.

Hey thanks for the really good work, its a lightweight modern alternative to scrollmagic that works really well with gsap/TweenMax and i am digging it so far :-)

Is there an option to disable trigger on reverse, like reverse: false or loop: false only saw the option to destroy/disable the controller

It would be neat to create a demo that shows how to make a scrolly that:

• advances by percentage on desktop
• advances by slide on mobile

Right now it divides a step into 100 increments, regardless of height. Maybe find a "comfortable" threshold (eg. 5px) and create increments based on that, so small elements won't have excessive watchers? Could also make that threshold configurable.

This is due to how IntersectionObserver works - it detects when an element is in view. if the scroll is so fast and the element small enough it can not register an enter/exit (an edge case, but possible if a user is skimming fast or anchor links). This would only be problematic if your JS logic needed step A to occur before B, or if they are totally independent (eg. A simply fades an element in).

Possible solution: index-based checks. Keep a queue of triggered elements, and make sure we don't skip (if so, fire previous trigger). This would work assuming all steps positioned relatively. This isn't a perfect solution however.

I'm wanting to use Scrollama to parallax some elements over the progress of a div.

I've used ScrollMagic and looking to use Scrollama. Right now I just want to simply transform:translate an element on the progress of a step. The trigger step is the header of the page.

Here is some code below:

  function handleStepProgress(response) {
      console.log(response.progress)
  }

  function init() {
	scroller.setup({
	  step: '.step-parent .step',
          progress: true,
          offset: 0,
	  debug: true,
	})
	.onStepProgress(handleStepProgress)
	  window.addEventListener('resize', scroller.resize)
}

<section id="container">
    <div class="step-parent">
      <section class="step hero team-hero is-large"></section>
    </div>
</section>

.step-parent{
  background-color: black;
  position: relative;
  overflow: hidden;
  min-height: 400px;
}
.step {
  background-size: cover;
  background-position: center;
}

Any help or ways to better understand would be awesome.

Our project does server-side rendering, so when we import scrollama, we get errors about window being undefined. That's because the IntersectionObserver polyfill isn't meant to run on the server.

A lot of other projects have polyfills as a prerequisite, rather than having them as dependencies. This gives developers the option to exclude the polyfill if their browser support list doesn't require it (which will, eventually, happen with IntersectionObserver), or when not running in a browser environment (such as for SSR).

Vertically resizing the browser window or just opening the developer console breaks these examples. The progress steps will end at some progress < 100%, and the elements in the basic example will get triggered at the wrong time.

I was having an issue getting scrollama to recognize when a container entered and exited the viewport. It turns out that in the scroller.setup(), I had listed a graphic class that didn't exist. No errors appeared.

Hi there,

this code:

const scroller3 = scrollama();

scroller3
  .setup({
    step: 'section',
    offset: 0.05,
    progress: true,
    debug: false,
  })
  .onStepProgress(({ element }) => {
    if (element.classList.contains('is-white')) {
      this.isDark = false;
    } else {
      this.isDark = true;
    }
  });

causes a lot of these errors on my page:

Might have something todo with no section element being available on the page? I'm not sure though - any advice?

Hello, I converted the demo from the announcement post to a CodePen, and it has some issues running in the editor. If you open the debug view so it's not inside an iframe it works as expected.

Just FYI.

https://codepen.io/bclinkinbeard/pen/OOKXjz

I think it could make most of positioning css obsolute

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

• Should it be entire for entire scroll or per/step?
• What happens if the element is > vh?

Is it possible to have multiple containers on the same page?

I cannot see how one should initialize multiple scrollers with multiple listeners.

Let's say I got 5 divs of a height of 500px each on a page.
If I scroll through it and log the Enter and Exit events when they go passed the offset treshold, the events are fired like this:

Enter (1st element enters)
Enter (2nd element enters)
Exit (1st element exits)
Enter (3rd element enters)
Exit (2nd Element exits)
...

What I would've expected:

Enter (1st element enters)
Exit (1st element exits)
Enter (2nd element enters)
Exit (2nd Element exits)
Enter (3rd element enters)
...

is there a specific reason for this order?

Would be great to be able to navigate between steps using the keyboard arrows and the space bar.

graph-scroll has it, and it's quite handy.

direction should be null by default, and the direction check should be a not check, not equals.

Developing a project using Angular 4 and we included the Scrollama initialization in the NgAfterViewInit lifecycle hook but the setup function is breaking the site in Safari.

Specifically, it's the lines:

var obs = new IntersectionObserver(intersectStepProgress, options);
obs.observe(el);

We believe some polyfills are being overwritten by the Angular CLI tool and so the IntersectionObserver doesn't work properly in Safari.

We tested the demo code from this tutorial in Angular and it breaks it.

I have a page where I want the header text to disappear after it's 50% gone, then 2 images I want to fade in on scrolling around their top section and a parallax text that moves on progress.

My idea was to create three instances and set them up but somehow one of them always doesn't work while the 2 others do. What am I doing wrong?

const header = scroller
          .setup({
            step: '.top-cta',
            offset: 0.5,
            debug: true
          })
          .onStepEnter(this.handleStepEnter)
          .onStepExit(this.handleStepExit)
          .onStepProgress(this.handleStepProgress);

          header.resize()
          header.enable()
        
const ImageTop = scroller
          .setup({
            step: '.text1',
            offset: 0.5,
            order: 1
          })
          .onStepEnter(this.loadTop)
          .onStepExit(this.loadLeft)
          ImageTop.resize()
          ImageTop.enable()

const parallaxText = scroller
          .setup({
            step: '.parallax-text',
            offset: 0.5,
            order: 2,
            threshold: 9,
            progress: true
          })
          .onStepProgress(this.handleStepProgress);
          parallaxText.resize()
          parallaxText.enable();