Giter Site home page Giter Site logo

Comments (6)

jchavarri avatar jchavarri commented on April 30, 2024 1

@Bretley @albertorestifo A PR for "scroll bouncing" landed yesterday that added some missing easing functions to Animation.re:

let cubicBezier = Rebez.make;
// From https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function#Keywords_for_common_cubic-bezier_timing_functions
let ease = cubicBezier(0.25, 0.1, 0.25, 1.0);
let easeIn = cubicBezier(0.42, 0.0, 1.0, 1.0);
let easeOut = cubicBezier(0.0, 0.0, 0.58, 1.0);
let easeInOut = cubicBezier(0.42, 0.0, 0.58, 1.0);

The actual calculation of the values was put into a separate repo, at least temporarily, just because it could be useful for other folks (and I needed at some point a "clean slate" to properly test it, think about it, and understand what was going on with some nasty bugs 😅 ): https://github.com/jchavarri/rebez.

There is some functionality to tween and also "chain" different animations, that can be seen in the tests.

Sorry about that, I didn't realize there was an issue about easing.


Having said so, I think the Animation module could still benefit from exposing spring-based animations as well. I've been looking at react-spring and popmotion for inspiration, but if anyone wants to take over and investigate that, it'd be awesome 🙂

@bryphe Not sure if the spring animations work would deserve a new issue though? as this one was explicitly targeting easing functions.

from revery.

bryphe avatar bryphe commented on April 30, 2024

This would be useful for #121 as well

from revery.

Bretley avatar Bretley commented on April 30, 2024

@bryphe I added the type for easing into the record and defined linear, quadratic, and cubic. What part of Animation.re needs to be changed so that we use easing instead of default linear

from revery.

bryphe avatar bryphe commented on April 30, 2024

@Bretley - awesome! Would you mind posting up a PR of what you have so far? I can help point out the place we need to change to integrate the new easing functions

from revery.

albertorestifo avatar albertorestifo commented on April 30, 2024

@Bretley are you still working on this?

from revery.

bryphe avatar bryphe commented on April 30, 2024

@jchavarri - amazing work! Thanks for implementing the remainder of easing functions.

@bryphe Not sure if the spring animations work would deserve a new issue though? as this one was explicitly targeting easing functions.

I would love to have spring-based motion (some of those demos are really impressive for react-spring / popmotion - especially how little code it takes to get nice effects).

I did log an issue previously in #131 - but it might be a bit too opionionated (maybe useSpring is wrong and there is a better API) - but we could start tracking discussion there, and rename it if needed? react-spring and popmotion might expose a more battle-tested and usable API.

In the meantime, sounds like the work here is done between #149 and #315 , so we can close this one out 👍

from revery.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.