electerious / basicscroll Goto Github PK

I have an animation that starts near the top of the window and works great. However, if a user loads the page already scrolled down (via an anchor link or page refresh or something) I want the animation to start lower the first time, but after some other interaction I want to change the to/from values to the original location.

Pardon my terrible scenario explanation.

Here's some code that shows a little clearer what I hope to do:

// Create the instance.
var instance = basicScroll.create({
	elem: someElement,
	from: 'top-top',
	to: 'bottom-bottom',
	props: { some props here },
});

// If loading with window at the top, start it up.
if ( document.documentElement.scrollTop <= 0 ) {
	instance.start();
}

// some other event happens here.
element.addEventListener( 'some-event', function() {
	// Change the from/to.
	instance.from = '200px';
	instance.to   = '400px';
	instance.calculate();
	instance.update();
	instance.start();
});

Hey,

What a cool library! I'm trying to figure out a way i could add or remove classes to my element from the callback (inside and outside)? Is there a way i could do like:

outside: (instance, percentage, props) => {
    console.log('viewport is outside from and to');
    instance.elem.classList.add('active');
}

Is it possible to create something similar to this (https://p2mv.studio/about) using basicScroll? Or would a more custom scroll need to be created?
I don't have to create exactly that, but that's the reference I have to work off.

I imagine if it was possible, it would be using multiple custom values in for the start and stop positions, but not quite sure.

Any help is appreciated

The only Polyfill I can find is https://github.com/postcss/postcss-custom-properties
As this is set during the build process basicScroll will not work. Which Polyfill do you recommend to work with basicScroll?

Not sure if this is a bug or if there's a fix for this or not, but trying to scroll on mobile to change the background position from the bottom of a background image to the top. On desktop it scrolls as anticipated from the bottom of the image upwards, but on mobile, it defaults to the top of the background image position and scrolls to the bottom as per normal behavior. Is there a reason for this or a fix?

I noticed that if I didn't set height to parent element then it changing values even when element not in viewport. this is very frustrating because in most cases I don't use hardcoded values to parent element.

Is there a workaround?

Hi, I've tried to run this in an Ionic3 project.

import * as basicScroll from 'basicscroll'

and added this code to ionViewDidLoad:
`
const instance = basicScroll.create({
elem: document.querySelector('.box'),
from: 'top-top',
to: 'bottom-bottom',
direct: true,
props: {
'--r': {
from: '0',
to: '1turn'
},
'--tx': {
from: '-100px',
to: '100px'
}
}
})

instance.start();
`
added a .box div with the css, but the item is not moving when scrolling. Any ideas?

Thanks in advance!

Regards,
Martin

Hi there, great library so thanks for that first and foremost!

We are currently using the library to change the background colour of the HTML element (using saturation and lightness as CSS vars to achieve this), however when we go past the target element, we want to undo that transition and put the background colour back to its default. Is there an ideal way of achieving this with the library?

Currently I've got a second target element that sits underneath the main one, however it doesn't seem to update the CSS variables at all? Can multiple calls to create() change the same variables?

Thanks again and any help / guidance would be great!

Hey everybody,

what a great library! 👍
I'm building a pretty long website where it should animate e.g. an image again when it comes inside the viewport.

I have this HTML setup

<div class="img-sticky">
  <img class="img-fit"  data-src="assets/images/station-1/bg.jpg">
  <img class="img-fit img-stack to-right deckkraft" data-src="assets/images/station-1/back.png">
  <img class="img-fit img-stack to-left deckkraft" data-src="assets/images/station-1/front.png">
</div>

So what I tried to use direct: true, but this did not work. So my next guess is the callback feature but I can't figure out how this works 😢

This is one of my instances

  const deckkraft = basicScroll.create({
  	elem: document.querySelector('.deckkraft'),
    from: 'top-middle',
  	to: 'middle-top',
    direct: true,
    outside: (instance, percentage, props) => {
          console.log('viewport is outside from and to')
     },
  	props: {
  		'--o': {
        from: .01,
        to: .99
  		}
  	}
  })

Which way would you suggest?

I'm not sure if this has to do with how I'm using the CSS vars, but if I scroll really slow, mostly back up to the top after shrinking the logo, I see the variables keep adjusting up and down. The header is using position: sticky; so the shrinking of the header shouldn't be adjusting the scroll position of the body. I've been trying everything I can to stop it or see what's causing it, but I'm not sure. Any ideas?

EDIT: I tested with the header using position: fixed; and it doesn't seem to do this.

EDIT 2: Logging scrollTop in the inside callback while the jitters are happening (and not scrolling manually, hand are off keyboard/mouse) shows it toggling 1px back and forth.

EDIT 3: It doesn't happen if I remove the margin scaling, and it still happens if I use padding instead of margin.

EDIT 4: I think it has to do with px rounding https://johnresig.com/blog/sub-pixel-problems-in-css/

This is Mac/Chrome.

It happens in this codepen for me as well: https://codepen.io/JiveDig/pen/rRNmwz

Is there an easy way to lerp from -> to ? would be an awesome feature if not. Its a simple function, but I'm not sure where if the basicScroll accepts functions as object values.

for reference:
https://codepen.io/rachsmith/pen/yYZapV

I recently discovered this library and love that it uses CSS variables - it's exactly what I've been looking for. However, I've hit a road block with the API while attempting to directly apply props[] variables to an array of elements while using a different element (i.e. the parent) as the scroll trigger.

My request is to create a new property, maybe called anchor or target, that allows you to listen to the scroll of a different element than what the directly applied props[] styles are assigned to.

Example:

<div class="foo">
    <div class="bar"></div>
</div>

const instance = basicScroll.create({
	target: document.querySelector('.bar'),    // this property assigns the scroll listener  
	from: 'top-bottom',    // start position relative to the 'target' property (or 'elem' if no target is assigned)
	to: 'bottom-top',    // end position relative to the 'target' property (or 'elem' if no target is assigned)
	elem: document.querySelector('.bar'),    // this property assigns where the 'props[]' are applied
	direct: true,    // apply props[] locally to 'elem'
	props: {
		'--ty': {
			from: 0,
			to: 100,
		}
	}
})

My recommendations:
This property would be optional and the default value is null.
If no value is given and elem !== null then the script would assume target == elem.
The property elem is required when target has a value.

For reference:
skrollr#relative-mode-or-viewport-mode gives the option to use data-anchor-target attribute when another element's position should trigger the assigned element's keyframes.

(Side Note: I was a huge fan of skrollr for years but had to eventually come to terms with the fact it was never going to be updated again... so my only option was to switched to Scrollmagic + GSAP. However, I have been less than pleased with the performance and overall API... Which means adding this property to basicScroll would be a game changer for me.)

Hello,
I imported this library via webpack using VueJS when I go into production with SSR I get this error:

Error: Missing property from

if (process.env.VUE_ENV === 'server') {
  if (window.innerWidth > 420) {
    document.querySelectorAll('.element').forEach(function (elem) {
      const modifier = elem.getAttribute('data-modifier')
      self.instances.push(basicScroll.create({
        elem: elem,
        from: 'bottom-bottom',
        to: 'middle-top',
        direct: true,
        props: {
          '--translateY': {
            from: '0px',
            to: `-${ 5 * modifier }px`
          }
        }
      }))
    })
  }
}

The property from exist, why I get this error?

Thanks,
Luigi

Is there any option to disable basicScroll on mobile devices?

Hi, I tried quite about anything, and can't see any property change if I console-inspect my dom. In the end, I even tried the body itself, but nothing happened. What am I doing wrong?:

var parallax = basicScroll.create({
  elem: document.body,
  from: 'top-bottom',
  to: 'bottom-top',
  props: {
    '--test': {
      from: '0'
      ,to: '100%'
    }
  }
})

How can i exclude ie11.
Browser detection to exclude the script does not work, always the syntax error!
I'm testing on win7 / IE11

It doesn't have to work... simply exclude ie11!

grateful for any help

Hi, great script, and I'd like to use! :) But i'm still old-school javascript, so for now I'm not doing transpiling. I see you're using modern js syntax like const and arrow functions and the like. Is it still possible to use it with plain old school syntax?

Hello,

When resizing my screen it seems to throw off my scroll animation. I'm using Svelte as my framework so I'm not sure if there is something I need to do in order to get it to work. The animation still works but it seems to throw off the from and to numbers.

my English is not good, just do my best.

.body {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    display: flex;
    flex-direction: column;
    max-width: 768px;
    margin: auto;
}
.main {
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translate3d(0,0,0);
    -webkit-overflow-scrolling: touch;
}

<div class="body">
  <div class="main">
      // my code
  </div>
</div>

like this, the scrolling wrapper is not body.

so can you add an option (like 'wrap') to fit it?

I'm using basicScroll with Angular through ngx-basicscroll. I'm able to get parallax working correctly, except for the initial parallax image placement. For some reason, the parallax image initially sits below where it should appear, but if I resize the screen even just a bit, it'll be at its correct placement.

Not sure if this is an Angular issue or a basicScroll issue.

Thanks.

There many nodes with the same class name, may I select them in one time?

I have the following code;

const backgroundText = basicScroll.create ({
     elem: document.querySelector('.background--text'),
     from: 'top-bottom',
     to: 'bottom-top',
     direct: true,
     track: true,
     props: {
          '--translatex': {
               from: 0,
               to: 2,
          },
     },
     inside: (instance, percentage, props) => {
          console.log('viewport is inside from and to')
     },
     outside: (instance, percentage, props) => {
          console.log('viewport is outside from and to')
     },
});

backgroundText.start();

I have this code at the bottom of my page, with some other scripts before closing the body tag, however it doesn't seem to be working.
I see the outside console log, when the page loads, but it doesn't show up again. And the inside never shows up.
Wondering if any css or other js could be causing an issue? As I'm sure this was working before, but even when I comment out all my other js/js libraries it doesn't work.

This is the html markup for that item;

<span hidden class="background--text ff-heading background--text__left" aria-hidden="true" unselectable="on">
     <span class="background--textitem" data-name="A space to grow"></span>
</span>

Any help is greatly appreciated

Does this plugin supports IE11?

It would be great to be able to define viewport values in vh units (or percentage/fraction of window height) ex: from: 'top-bottom', to: 'top-75vh'. Use case example: to reveal elements as they scroll into view (with opacity and a bit of movement) and have the transition end as the element's top reaches 25% from the bottom. I could use calc and let the opacity go above 1 using top-middle, but the movement would continue.

Please consider the following fiddle: https://jsfiddle.net/e356rosq/

The images are supposed to appear fixed (by translating them opposed to the scroll direction). But unfortunately this looks a bit "choppy". Is there a way around this?

First off, amazing library. You've allowed some really next-level scroll-based animations for me and that is awesome.

I have this issue on React (17.0.1) where BasicScroll (3.0.3) is saying:

Error: Property 'from' must be a absolute value when no 'elem' has been provided

I'm using almost the exact same code from the guide. I've tried removing and reinstalling basicscroll, removing all npm packages, restarting, removing cache, etc..

Here's my code:

import * as basicScroll from 'basicscroll'

const imageGrow = basicScroll.create({
        elem: document.querySelector('.imageGrow'),
        from: 'top-bottom',
        to: 'middle-middle',
        props: {
            '--image-box-width': {
                from: '10%',
                to: '0'
            }
        }
})

imageGrow.start()

Thank you so much for any assistance you can provide!

Hi,
I'm trying to include basicScroll in a Roots/Sage project and I'm getting a console error after building my assets for production.

TypeError: l is not a function. (In 'l(t,c,f,h)', 'l' is 4)

I'm not the most webpack savvy user, so my troubleshooting is limited. The library works great when the assets aren't uglified, but throw the above error in the browser console when the webpack bundle is uglified.

I've tried separating basicScroll into its own separate script file (still uglified) with the same result. I've also tried a fresh copy of Sage with no other (non-default) dependencies, also with the same result.

I'm happy to try any more troubleshooting steps you can suggest. Thank you for your time and for this awesome library.

Your project sounds interesting. Can we all have an online demo?
One reason is to make it easier for users who can't download your project to try out.

Is it possible to recalculate on resize props which are dynamically calculated? For example, my prop is the radius of a circle for clip-path and its value is calculated from the width and height of it's container. It seems the calculation is only done once on load, and not evaluated on resize.

basicScroll.create({
    elem: item,
    direct: image,
    from: 'top-bottom',
    to: 'middle-middle',
    props: {
        '--maskRadius': {
            from: '1000px',
            to: this.getTargetMaskSize(image, 2),
            ease: 'circOut'
        }
    }
});

I'm seeing choppy animations for transforms. The most notable is scaling. It looks like basicScroll rounds intervals to 2 decimal places, which makes the animations appear choppy during scroll. Is there a way to allow more decimal places through the API?

Rather than using getBoundingClientRect() move to the much more performant Intersection Observer API. It will also make calculations easier too.

See #15

Getting a requestAnimationFrame is not defined error in non-browser environments, such as when Server Side Rendered or during a Static Site build.

Hello,

I noticed that when I use the inside callback, If I scroll too fast it will stop around 60% instead of 100% and prevent my animation to finish properly. Is there anyway it could be fixed ?

Cheers

What's the browser support? Nothing mentioned there. Does this work when browser do not have CSS variables?

I use Nuxt and SPA behaviour and would like to know how to restart it (or destroy - recreate) on each route change as the method will stay alive globally but won't move the element anymore as the reference changed.

How would i be able to create an unminified version of the disc (basicScroll.min.js)?

I have a layout which is prone to layout recalculation up to 1000ms after the DOMContentLoaded event, which resulted in frequent wrong calculations by basicScroll, which I managed to fix by using this common nasty method:

const instance = basicScroll.create({ /* ... */ })
instance.start()

for (let i = 0; i < 20; i++) window.setTimeout(() => {
  instance.calculate()
  instance.update()
}, 250 * i)

From the documentation, it also wasn't clear that basicScroll doesn't recalculate on window resize events, so I also added

window.addEventListener('resize', () => instance.calculate(), null)

Maybe the documentation could be made to better reflect the need to recalculate on resize, and maybe basicScroll would benefit from a ResizeSensor integration that would watch the container for size updates and trigger a recalculation.

Thanks for the great work!

First i'd like to say this repo is awesome! I was testing it out and noticed an undesirable effect on on the mobile experience. So in safari or chrome on iOS there is an expanding top bar and a collapsing bottom bar which affect the viewport height. So during a change in scroll direction when they appear or disappear, it causes like a jank in the animation due to a "resize"

I tried looking up how to get the absolute viewport size on google for these devices but haven't found much yet.

I will try to fix it myself and submit a PR but if anyone experiences this it would be great to know :)

This library is amazing :)

Would you be up to add typescript for better code quality and easier usage?

That way it would also be possible to ship an additional smaller version of this library which would not validate the parameters during runtime.

Great thinking behind the library.

I've been playing around with it today and ran into a problem trying to give the same parallax effect to multiple elements.

If I had five divs with class ".box" would it be possible to loop through an array of all the box elements and apply basicScroll to all of them.

I'm fairly new to Javascript so I apologise in advance if this is something trivial and not at all related to your library. The techniques I've used with animation libraries doesn't work for this so I'm a bit confused.

edit: Just found the codepen example that has exactly that in it. Thanks for your time, and I'll see myself out.....

For some reason, if you see the .image-arrow DOM element, everything checks out, but the animation isn't working.

http://dev.peterandpaul.co.uk/makeitclick/

Is there anything I'm missing here?

Hi, first of all - great plugin!

I've set it up and everything works great, but when I run gulp I get the warning "basicScroll is not executing because you are using it in an environment without a window object".

I'm a bit of a rookie so this could be something I have done. I've searched the error and similar errors on Google but couldn't find a fix. Any ideas?

Hey there,

First off, let me say that this library is amazing. I've had no problems using it with my own code, and it's given me the opportunity to do some pretty cool things.

However, I've unfortunately inherited some raunchy code from a new project of mine in updating an older web page. For reasons which are out of your control, my animations only work while I resize the browser window (check rotation_bug.mp4 in attached zip file).

I'm assuming something is wrong with the code I've inherited, because I've gotten each animation to work on the same domain and browser, just without the extra code around it.

Here is a zip file with all html, css, and js files, as well as an mp4 file to clearly illustrate the problem I'm having (in the mp4 video, I'm attempting to rotate the "our solutions" header in bold). If you'd like to try it for yourself, the link is here

I'm unsure if this is the place to ask about this problem I'm having, so ignore this if it's not relevant.

Thanks!

First off, just found basicScroll and instantly loved it... nice work! I've spent a lot of time with ScrollMagic (really powerful) but really like the lightweight/variable approach here.

I'm thinking it would still be efficient but much more powerful/flexible to have a callback function when an instance/element was before and/or after inside/tracking.

I'm doing some trickery, as I should be with a library like this ;P - and want to do some stuff when outside the target but only after I have scrolled past it. So far, haven't found a logical and efficient way to do this without a lot of other code.

Is it possible to apply a CSS transform using direct mode? I want to add a CSS translate directly to an element, and could obviously do that with CSS variables, but since I'm adding it directly (not globally) it'd be nice to do it the old-fashioned way (style="transform: translateY(10rem)") to get IE11 support.

I tried:

direct: true,
props: {
	'translateY': {
		from: '0',
		to: '10rem'
	}
}

and

direct: true,
props: {
	'transform': {
		from: 'translateY(0)',
		to: 'translateY(10rem)'
	}
}

... but neither of those seem to work.

https://basicscroll.electerious.com/

In the example:

   from: 'top-top',
   to: 'bottom-bottom',

It can't start from the top and end at the bottom of the viewport. It should start at the bottom and end at the top. So from: 'top-bottom' and to 'bottom-top'.

Guys, hello! Please help me to understand what is the reason for such poor performance in animation!?
This bug in Safari and Firefox, on Chromium(Google chrome, Yandex browser) - good.
this is my code:

const headerAnimationBackground = basicScroll.create({
    elem: document.querySelector('.header__row'),
    from: 500,
    to: 1000,
    props: {
        '--rotate': {
            from: '-90deg',
            to: '0',
        },
        '--position': {
            from: '-100%',
            to: '0',
        },
    }
})
const headerAnimationWidth = basicScroll.create({
    elem: document.querySelector('.header__row'),
    from: 0,
    to: 500,
    props: {
        '--max-width': {
            from: `${$('.header .container').outerWidth()}px`,
            to: '1200px',
        },
    }
})
const headerAnimationLine = basicScroll.create({
    elem: document.querySelector('.header__row'),
    from: 800,
    to: 1000,
    props: {
        '--padding': {
            from: '20px 80px 0 80px',
            to: '0 80px 0 80px',
        },
    }
})

if (window.matchMedia("(min-width: 1200px)").matches) {
    headerAnimationLine.start()
    headerAnimationWidth.start()
    headerAnimationBackground.start()
}

And video

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

See this demo: https://scrollmagic.io/examples/basic/simple_pinning.html

I have a hero image section that has a secondary image right below it. I need for that secondary image to slowly move up into the hero section and then pin itself at the bottom edge when it reaches it. I'm not seeing an how I'd achieve that with basicScroll