Tresjs / cientos

Collection of useful helpers and fully functional, ready-made abstractions for TresJS
https://cientos.tresjs.org/
MIT License
278 stars 40 forks source link

[ScrollControls]: add easing prop #189

Open alvarosabu opened 1 year ago

alvarosabu commented 1 year ago

Description

As a developer using TresJS, I would like to be able to control the easing of the ScrollControl animation by passing either a value or an easing function myself.,

Suggested solution

We can set an enum of the most common easing functions


'easeIn`
`easeOut`
`power2`

etc

So a new prop called `easing` accept either a string from this enum of a function defining that easing function to be use

### Alternative

_No response_

### Additional context

_No response_

### Validations

- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/cientos/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://cientos.tresjs.org/guide).
- [X] Check that there isn't [already an issue](https://github.com/tresjs/cientos/issues) that reports the same bug to avoid creating a duplicate.
damienmontastier commented 1 year ago

Hey @alvarosabu, what about using Lenis to manage scroll controls? It can be cool if the website also work with Lenis! What do you thing ? Or maybe it's better to create another ScrollControls especially for Lenis, in case there's no height on our page and Lenis returns a height equal to the viewport.

alvarosabu commented 1 year ago

Hi @damienmontastier thanks for the suggestion! I didn't know about Lenis, it looks pretty good.

Normally we try to avoid adding external packages and since we handle almost everything with ready-to-go composables from @vueuse/core like useScroll which is reactive (we would need to make a composable wrapper around Lenis`

So it's unlikely we use it for cientos. That doesn't mean that you could try creating a package for Lenis as a Tres abstraction, we can support you on that. It would be the first community-based abstraction 😊

damienmontastier commented 1 year ago

Hey @alvarosabu , it's totally understandable and normal to emancipate yourself from a third-party library, it avoids any potential problems! Yes definitely, in the future it could be cool, we'll have to think about it! 👌

andretchen0 commented 1 year ago

I've been working on Lensflare and needed some easing functions. I'm still working on approval with Jaime, but here's what's included so far.

For the moment, those easing functions are in /src/Lensflare/easing.ts. Would it be worthwhile to put them somewhere else? Maybe under /src/utils/easing.ts?