electerious / basicScroll

Standalone parallax scrolling for mobile and desktop with CSS variables.
https://basicscroll.electerious.com
MIT License
3.63k stars 148 forks source link

Remove environment warning #59

Open guyhamilton opened 4 years ago

guyhamilton commented 4 years ago

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?

electerious commented 4 years ago

That's fine. It's because you're building or using your modules in an environment without a window object. You can ignore it if your site is working fine 😊

We should remove this error as it's just annoying when using SSR.

guyhamilton commented 4 years ago

@electerious Ok cheers - thanks for your response!

juriadams commented 4 years ago

What's if the site isn't working fine? 😞

This might be a problem related to the react-basic-scroll package, but when trying to use a variable, it's initially set to NaN and when scrolling just 1px, it sets itself to the to value. I'm pretty sure this is related to this warning message.

Here's my config:

public config: any = {
    from: "bottom-bottom",
    to: "top-top",
    direct: true,
    props: {
        "--r": {
            from: "0",
            to: "0.1turn",
        },
    },
};

And here's my implementation of the ReactBasicScroll Wrapper-Component:

<ReactBasicScroll config={this.config}>
    <div className={styles.opener}>
        <div className={styles.wrapper}>
            <div className={styles.content} style={{ transform: "rotate(var(--r))" }}>
                ...
            </div>
        </div>
    </div>
</ReactBasicScroll>

When initially opening the Page, the variable is set to NaNturn:

... and after scrolling 1px, it sets itself to 0.1turn, the to value:

Do you want me to open a new Issue? I'm not sure since I suspect that this relates to this issue. :)

electerious commented 4 years ago

It's not related to this issue, but it might be worth to try from: 0 instead of from: "0". Not sure if that helps. It might also be because of the from and to values. You're currently starting your animation when the bottom of the element reaches the bottom of the viewport, and ending when the top of the element reaches the top of the viewport. This should be fine, but it might be worth to try different values.