search

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

Multiple instances animating the same values #53

Closed joshwaaaah closed 4 years ago

joshwaaaah commented 4 years ago

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!

electerious commented 4 years ago

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?

You could use the callbacks. It will require a bit more work, but they allow you to do whatever you want (e.g. when the percentage is > 100% than reset the variables to a custom value): https://github.com/electerious/basicScroll#callback-functions

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?

Multiple instances will overwrite each other. The one that executes last wins.

joshwaaaah commented 4 years ago

That's great - thanks for the advice, and again, great library. Will definitely look into the callback option.