ashthornton / asscroll

Ash's Smooth Scroll 🍑

Just build it.

asscroll's Issues

Update Codepen examples with v2 syntax

Provide defaults for Initialisation

Hi,
Sorry another issue, hope you're doing good.
I tried initializing the lib only with one property, assuming the other options would fall back to default but it did not.

const smoothScroll = new ASScroll({
      customScrollbar: true
    })
    smoothScroll.enable()

e.js:50 Uncaught TypeError: Cannot read property 'nodeType' of null

If I had element: '.asscroll-container', I got e.js:50 Uncaught TypeError: Cannot read property 'nodeType' of null

Uncaught SyntaxError: Cannot use import statement outside a module

Hi, I'm using ASSCROLL for the first time, and I'm stuck. I've tried to figure it out by myself, but I'm not very knowledgeable in JS.

I copied the GSAP x Asscroll Codepen Js and my site now says "Uncaught SyntaxError: Cannot use import statement outside a module". I literally copied and pasted it.
I add the JS file to my Js folder, and I added it to header.php and functions.php, but I can't get it to work. What am I doing wrong?
Thank you

Emit event when scrollTo() finishes

Emit an event when the smooth scroll as a result of calling scrollTo() finishes

IE11 v2 Issue

Hey,

I know you've dropped IE11 support for v2. All for it!
But I was wondering if there is anything we can do to get the plugin to resolve as it's throwing out a "syntax error".

If not, no probs, is there a working example of the ASScroll v1 working with gsap and scroll triggers?

Thanks,
Jake

Expose library var in dist version

You cannot import ASScroll from the production version in the dist folder.

Set up UMD definitions in webpack output and test.

{
    output: {
      library: "ASScroll",
      libraryTarget: 'umd',
      umdNamedDefine: true
    }
}

Horizontal Scroll Demo

Get the correct scroll offset when grabbing the scrollbar, rather than starting from the center of the scrollbar

Problem installing

Can you please add more explaination in Installation section? i'm having problem to install this. Is there any way to simply install by calling script in the page?

Odd behaviour when using GSAP ScrollTrigger with "markers: true"

When configuring a ScrollTrigger, setting markers: true in the scrolltrigger options causes the page to jump around. It seems to be that once the scroll is finished getting to its final position, the page jumps another 200 - 300 px in the scroll direction.

scrollTrigger: {
            trigger: '#_header_row-2-16',
            start: "+=10px",
            end: 99999,
            toggleActions: "play none none reverse",
            markers: true // <<<< this causes the issue
        }

Behavior where scroll position is repeated

I am tryin to implement asscroll with ScrollTrigger which works fine, but I get a strange behavior with and without using scrolltrigger. For some reason whenever I scroll (with wheel or moving the scrollbar) the scroll progress gets to its target and then reverts to the prescroll position and does it again. Its like something doesn't catch up with the scroll state and resets it.

My DOM is a bit weird, I have basically an empty container (React)
the refs are the the target elements f or scrollTrigger and asscroll. I only have one element that sits a the bottom of this empty container as I want it to scroll in naturally. The rest of the content is in fixed panels that have their own animations based on scroll position.

<ScrollRange ref={asscrollContainerRef}>
  <ScrollInner
    ref={containerRef}
    css={{
      height: '400vh',
    }}
  >
    <BackgroundVideo videoRef={videoRef} />
  </ScrollInner>
</ScrollRange>

The asscroll code waits for an appReady state variable to become true before it initializes

useEffect(() => {
  if (appReady) {
    asscrollRef.current = new ASScroll({
      containerElement: asscrollContainerRef.current,
      disableRaf: true,
    })
    const asscroll = asscrollRef.current

    gsap.ticker.add(asscroll.update)

    ScrollTrigger.defaults({
      scroller: asscroll.containerElement,
    })

    ScrollTrigger.scrollerProxy(asscroll.containerElement, {
      scrollTop(value) {
        return arguments.length ? asscroll.scrollTo(value) : asscroll.currentPos
      },
      getBoundingClientRect() {
        return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }
      },
    })

    asscroll.on('update', ScrollTrigger.update)

    ScrollTrigger.addEventListener('refresh', asscroll.resize)

    mainTimeline.current = gsap.timeline({
      scrollTrigger: {
        trigger: containerRef.current,
        start: 'top top',
        end: 'bottom bottom',
        // onSnapComplete,
        // snap: {
        //   snapTo,
        // },
        onUpdate,
      },
    })

    asscroll.enable()
  }
  //eslint-disable-next-line
}, [appReady])

this is basically the same implementation as your scrolltrigger example. I attached a video of the behavior

test.mp4

So after every scroll it resets to the start position of the scroll and then does the scroll again. I am confident that I am doing something wrong, and its not the library as it works for everyone else ;). Any help would be appreciated.

[edit]

Forgot to add CSS for the DOM elements

const ScrollRange = styled('div', { position: 'fixed' })
const ScrollInner = styled('div', {
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
})

Can't scroll full height on the inner container

Hi, first thanks for your library it's great especially for the exemple you provide for GSAP scrollTrigger !

But I have an issue with the smooth scrolling, I can't scroll to the full height of the inner container. For exemple on page load my inner container is 2406px height but the smoothscroll only translate the inner container until -1486px, so a big part on the inner container is not visible.

Do you know what could cause this?

URL with hash not scrolling to proper section on page load

Hi again! I'm pretty sure the issue here is between the chair and the keyboard, but I've been banging my head against the wall for a couple of hours and would appreciate being pointed in the right direction.

I'm having trouble when clicking on links to other pages that have a hash in the URL. Ideally I would want the user to be brought down to the corresponding ID on the destination page, but that isn't happening. It's hard to create a codepen to demonstrate since it relies on the URL, but my setup is identical to GSAP's ASScroll integration demo.

I've also tried grabbing the URL hash after ASScroll has been enabled and manually scrolling down to that location:

var hash = window.location.hash.substr(1);
if ( hash.length ) {
	var hash_target = $('#' + hash);
	if (hash_target.length) {
		gsap.to(window, {
			duration: 0.6,
			scrollTo: {y: $(hash_target), offsetY: scrollOffset}
		});
	}
}

But immediately after the window scrolls to the proper location, it stubbornly scrolls right back up to the top of the page.

Any ideas on how I can resolve this?

Thanks again!

about scrollDirection and exiting overflow-y div inside

Hi,
thanks for this light scroll library.
I was wondering how to get the scrollDireciton, to manipulate the header visibility in my case.
Also, I have a div with an overflow-y that does not work anymore when I enable the scroll, is this a bug or expected?
how to handle this case in your opinions?

thanks

I had to install dependencies

Hello,

I've been trying to use the library but got the following errors related to unresolved dependencies.
Installing those two libs fixed the error, not sure why it happened in the first place.

ERROR in ./node_modules/lodash.debounce/index.js
Module not found: Error: Can't resolve './../webpack/buildin/global.js' in '{my-projet-path}\node_modules\lodash.debounce'
 @ ./node_modules/lodash.debounce/index.js 1:0-41
 @ ./node_modules/@ashthornton/asscroll/src/Events.js
 @ ./node_modules/@ashthornton/asscroll/src/index.js
 @ ./scripts/app.js

ERROR in ./node_modules/@ashthornton/asscroll/src/E.js
Module not found: Error: Can't resolve '@unseenco/e' in '{my-projet-path}\node_modules\@ashthornton\asscroll\src'
 @ ./node_modules/@ashthornton/asscroll/src/E.js 1:0-28 2:12-13
 @ ./node_modules/@ashthornton/asscroll/src/index.js
 @ ./scripts/app.js

Examples for common frameworks

Not really an issue, but would be so nice if there where examples for various common js frameworks, like Vuejs, Nuxtjs, React, etc.

In Nuxtjs, I'm struggling with asscroll breaking scroll between pages.

Anchor Linking + GSAP ScrollTrigger

Hi I just started using this library for a project, really great work by the way -- TY

I ran into a slight issue I wanted to document here with my workaround for now.

When using ScrollTrigger, specifically the pin option, ScrollTrigger wraps DOM elements with a div.pin-spacer ASScroll doesn't scrollTo the right container that are children of the pin spacers.

I had to do something like this to work around it for my navigation:

document.querySelector('nav').addEventListener('click', (event) => {
  if (event.target instanceof HTMLAnchorElement) {
    event.preventDefault()
    event.stopImmediatePropagation()

    const section = document.querySelector(event.target.hash)
    const parent = section.parentElement
    const isInPinSpacer = parent.classList.contains('pin-spacer')
    const offsetY = isInPinSpacer ? parent.offsetTop : section.offsetTop // <---- specifically here

    smoothScroll.scrollTo(offsetY)
  }
})

I would love any additional suggestions/thoughts. Thank you!

Scroll event reports position before it is clamped

Listening to the scroll event like: ASScroll.on('scroll', scrollPos => console.log(scrollPos)) and scrolling to the top or bottom of the page will report the last scroll position before being clamped.

Clamp the scroll position BEFORE emitting this event.

Adjust scroll speed

Just started using this library on a new project and I'm really loving it.

As a feature request I would love if I could adjust the scroll speed. Something like asscroll.setSpeed(0.5)

Thanks for all the work on this!

Asscroll + Highway.js

Hi Ash,

This one might be a little difficult to recreate so will try explain the best I can.

I'm trying to use Assroll with es modules and highway js where I have an init and destroy function in my scroll.js file. Asscroll setup is default with all the css. I've even tried the disable native scrollbar method.

In the highway renderer.js file I call the two functions as normal. destroy on leave, init on completed.

However, when the transition is in progress and you scroll (both mouse and touch pad) I get a jump in content. it perfectly scrolls but the content isn't visible until after a few seconds when it catches up to the current scroll position.

I tried the same setup with locomotive scroll and works perfectly. When you inspect the element you can see that It destroys the scrollbar and inits it after page transition completed.

With Asscroll the scrollbar is never destroyed which I think is causing the problem so if you try to scroll between the transitions you can see the s'show' class being added.

All asscroll setup is standard.

Let me know if you need more information.

Question about data prop usage in HTML

Is there a plan to put in the README the available properties in HTML? or is there and i'm not seeing it?

I ask because i am comparing using this to locomotive and i see you have data-speed available which i like but it makes me then want to know what else i can do with ASS.

thank you :)

Disabling the asscroll on menu or modal open

Currently using Asscroll on my gatsby project and everything seems to be going fine until I discovered an anomaly with the behaviour of the page when the menu is open.

Before using the library, when the menu is set to open, the page is fixed and doesn't scroll until the menu is set to close again. With Asscroll, when the menu is opened, the page would still scroll since the fixed position no longer works inside of the asscroll container.

I shared the isOpen state via context across the page and used ternary where I instantiated the asscroll library as so

isOpen? asscroll.disable() : asscroll.enable()

The disable never seems to work unless I use it without the conditionals.

How else can I fix this?

ASScroll should start at a page's previous scroll position rather than lerp to it

When automatic history.scrollRestoration is enabled, ASScroll current lerps to the position after being enabled (see #55). It should immediately start at that position.

Touch scroll performance using with Webgl

Hey!

Tried the Touch-friendly DOM/WebGL Sync on my iPhone and found that the performance is strange: webgl planes flicker when moving and seem not to be updating at the same speed as the dom elements.

Tried replacing touchScrollType to transform and it synced up the planes to the dom elements, but it also made both of them flicker, whereas with scrollTop only the webgl context was flickering.

Videos with scrollTop and transform.

Hardware/software specs:
iPhone X, iOS 14.5.1, Chrome & Safari (both latest). Tried it on the ios simulator on mac - same there. Desktop is fine.

If it'd be my guess without looking at the code, I'd say either there's a problem with throttling of the event that updates the scroll position or it just plain can't keep up with the framerate.

Let me know if I can help with anything else.

WebGL Demo

Library is not exposed correctly in build version

When using the library from a CDN, the class can only be accessed via ASScroll.default().

Issue with Select2.js

Hello,

First off, thank you for creating such an easy to use plugin!

I'm using ASScroll on a new build, and ran into some issues when using it alongside Select2.js. Select2.js offers styled select dropdowns instead of relying on the browser, including features like autocomplete. Unfortunately, when trying to scroll through a Select2.js dropdown, ASScroll triggers and starts scrolling the page behind the dropdown instead.

I put together a codepen of the issue here.

Any ideas why this would be happening, and how it could be resolved? Is there a way to tell ASScroll not to scroll the page when the mouse is over a specific element (like the dropdown)?

Thanks again!

Is there a way to have a footer inside the scroll container, but outside the scroll element?

Given the following structure

<div class="scroll-container">
<div class="scroll-element">
<-- body content -->
</div>
<div class="footer"></div>
</div>

Is there any way to have the footer scroll into view at the bottom as if it were in the scroll element? Due to the page templating system I'm using, it is problematic to move the footer and body content into another div.

jump immediately to Y-position without scroll animation

Thanks Ash for this great piece of code,

The following is more a feature request than an "issue"
I´m experimenting a lot with this bundled with GSAP´s scrolltrigger. In my lastest application, it opens a fullscreen (scrollable) overlay. on close it should instantly jump to the last position (It remembers the offset value in a variable and apply it via "scrollTo(someoffset)"). I´m wondering if it´s possible to jump immediately to a Y position without animating the scroll to there (example below). This could open up the possibilities for some nice transitions.

example of jumping content:

Looking forward to read from you :)

Thanks and Greetings,
Richard

Performance differences between Chrome and Safari

Hello again,

Are there known performance issues in Safari compared to Google Chrome? I have the basic demo open in both browsers, and while Chrome is buttery-smooth, Safari is noticeably slower/shakier. On the demo it isn't that big of an issue, but on pages with more going on, and while scrolling through sections with animations added on (through GSAP ScrollTrigger or similar), the shakiness is much more pronounced.

Asscroll and Barba.js

Hello Ash,
can you give me some tips to make the two live together?

I start to basic example
barba.init({ transitions: [{ name: 'opacity-transition', leave(data) { return gsap.to(data.current.container, { opacity: 0 }); }, enter(data) { return gsap.from(data.next.container, { opacity: 0 }); } }] });

The transition works then after a while the height of the body is set to 0 and everything disappears.

Thanks!!

Issues with fixed elements (update docs)

Hello,
I had to adapt my code to make it work, probably it would be great to add it to the documentation.
This following code did not work initially, I had to wrap it within another div to resolve the issue.

<div class="asscroll-container">
  <nav style="position:fixed;"></nav>
  <main> /* content /*</main>
</div>

Create PJAX navigation example

A common question is how to use ASScroll with a PJAX navigation like Highway or Barba. Make a demo showing the core concept or how to use ASScroll in this context.

Allow pre-selected elements to be passed through to ASScroll

The scroll container and inner elements can only be selected via a string. Allow HTMLElement and NodeList through too

How to use with libs like AOS (animate on scroll)?

Hi.

When using with other libraries that use intersectionObserver like AOS, scrolling is smooth but the other library only executes/affects its target elements after smooth scroll stops.

This leaves a huge blank area that looks an error, until the user stops scrolling, which then updates all effects.

Any ideas on what can be done?
I know that in GSAP we can use ScrollProxy, but AOS doesn't have anything like that.

containerElement question

Hi,
in [parameters.containerElement] default is "[asscroll-container]", but if I wanted to apply for example "[my-container]",
and in html <div my-container>
the result is <div my-container asscroll-container style=...........etc>
why?
This is only a question for full customization.
Thanks in advance

Firefox scroll speed has decreased

Perhaps due to a change in the deltaY value from the wheel event

Tab Focus

First of all great work!

I noted that tab focus had been implemented so was excited to try on a new project. The tab focus seems to jump up and down between a and button tag elements.

I have updated your recent pen with on codepen with some additional links at the bottom so you can see what I mean when you tab.
https://codepen.io/plankton/pen/BaKmvyX

I changed the cdn to 1.6.1.

Enable support for GatsbyJS

Trying to integrate the library into GatsbyJS fails due to the window object undefined during server-side rendering.
Thanks for your help on that.

[=========================== ] 16.871 s 249/253 98% Generating image thumbnails
ReferenceError: window is not defined
at Object../node_modules/@ashthornton/asscroll/build/asscroll.js (/Users/geier/Projects/webdev/public/render-page.js:1753:4)
at webpack_require (/Users/geier/Projects/webdev/public/render-page.js:30:30)
at Module../src/components/app-layout/AppLayout.tsx (/Users/geier/Projects/webdev/public/render-page.js:64087:79)
at webpack_require (/Users/geier/Projects/webdev/public/render-page.js:30:30)
at Object../node_modules/gatsby-plugin-layout/wrap-page.js (/Users/geier/Projects/webdev/public/render-page.js:11123:26)
at webpack_require (/Users/geier/Projects/webdev/public/render-page.js:30:30)
at Object../node_modules/gatsby-plugin-layout/gatsby-ssr.js (/Users/geier/Projects/webdev/public/render-page.js:11100:27)
at webpack_require (/Users/geier/Projects/webdev/public/render-page.js:30:30)
at Object../.cache/api-runner-ssr.js (/Users/geier/Projects/webdev/public/render-page.js:139:11)
at webpack_require (/Users/geier/Projects/webdev/public/render-page.js:30:30)
at Module../.cache/develop-static-entry.js (/Users/geier/Projects/webdev/public/render-page.js:468:73)
at webpack_require (/Users/geier/Projects/webdev/public/render-page.js:30:30)
at /Users/geier/Projects/webdev/public/render-page.js:94:18
at /Users/geier/Projects/webdev/public/render-page.js:97:10
at webpackUniversalModuleDefinition (/Users/geier/Projects/webdev/public/render-page.js:3:20)

There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html ReferenceError: window is not defined

8 | else
9 | root["ASScroll"] = factory();

10 | })(window, function() {
| ^
11 | return // (function(modules) { // webpackBootstrap
12 | // // The module cache
13 | /******/ var installedModules = {};

WebpackError: ReferenceError: window is not defined

• asscroll.js:10
  node_modules/@ashthornton/asscroll/build/asscroll.js:10:2

Provide positive scroll position values

scrollPos and smoothScrollPos both return the translate Y value rather than the 'true' scroll position. This makes it confusing when dealing with the value externally, usually resulting in having to manually flip it like -asscroll.smoothScrollPos

Demo

Hi !

I ❤️ the name ! Just miss a demo to see it in action 😃

Cheers

Doesn't work on mobile starting from version 1.7.0

Hey Ash, I was testing a new project I'm working on that uses version 1.7.3 and saw that 🍑scroll is not initialized on mobile.

On another project I still have version 1.5.9 and it works perfectly, so I took some time to investigate and found out that problems start arise with version 1.7.0.

On 1.7.0, smoothscroll is really "janky"; it seems every calculations screw up and the progress reaches 100% way before the end of the page.

On 1.7.1 it simply doesn't work. The styles on .asscroll-container are not even applied.

Versions 1.7.2 and 1.7.3 have the same issue.

Here is how I initialize 🍑scroll:

new ASScroll(
  disableRaf: true,
  scrollbarStyles: false
})

As you can see, no fancy weird wizardry of whatsoever.

This happens on both my dev environment (Chrome 87 with device emulation on an early 2015 MBP with Catalina) and my phone (Huawey Mate 10 Lite with Chrome 87 and Android 8.0.0).

Unfortunately, I can't share any video or link because this project is under NDA, hope you can reproduce the bug easily.

Custom scrollbar handle can get very small on long pages

Set a minimum height for the scrollbar handle and take this into account when calculating the scroll track bounds.

Middle Click Scrolling

Great library you have here!

I want to request a feature: support for middle-click scrolling.
As far as I know, this library doesn't middle-click scrolling which obviously hinders Accessibility.

How would you implement scrolling to a section when using this library with gsap ?

I love the integration of this library with scroll trigger so far but I've been unable to get gsap scrollTo working with this library. How should I go about implementing scrolling to anchor tags/sections

Highway example bug

My team started a project with ASScroll and we're using it with Highway from Dogstudio.

We've encountered a bug where if the user scrolls down on a page and then refreshes the page, immediatelly after the refresh, the page scrolls down to the last position it was before the refresh. We thought it was a bug in our end, but after further research, forked the PJAX example (linked in the readme) and it does the exact same thing.

Here's a video illustrating the problem: https://cln.sh/PzSspZ

Question about memory usage

What would be the memory impact on the GPU when applying a 3d transform to the entire scrollable DOM element? Would it be significantly better to transform only sections of the DOM? (For instance, that is how Locomotive Scroll works.)

In my rudimentary tests, the memory consumption was greatly reduced by transforming only the required sections, and removing transforms as soon as possible. Is this something already documented/tested?

I'd love to know more.

Custom scrollbar not working properly

First of all great work Ash, and thank you for sharing it! Giving this a shot in a new project.

I'm encountering the following problem: my .asscrollbar__handle is being set the same height of the viewport and isn't translating on scroll. It does show on scroll and hides on stop.

I'm not quite sure what I might be doing wrong but I've been looking at the codepen demo and my HTML structure is about the same: my <main> is the .asscroll-container and the .asscrollbar is its sibling. Only difference is that there's a <nav> element outside the .asscroll-container but if I remove it the problem remains.

Any thoughts would be appreciated!

Make disabling on touch devices optional

Provide an option to allow smooth scroll on touch devices.

Higher refresh rate screens

Look into the possibility of creating a consistent lerp speed on screens that refresh above 60Hz. The lerp finishes quicker the higher the refresh rate since the requestAnimationFrame runs more times in 1 second.