createTransition and createTransitionEffect

[q1b]

Hello, I have made useTransition version of link in solidjs, but it's has just more work, I have done my research and learning from it as well, it seems working pretty well. Also added a Effect createTransitionEffect which is just a wrapper around createEffect and useTransition but giving user a new option, @thetarnav I want to contribute it to solid-primitives.

[thetarnav]

Hello there! I love the idea.
We already have a tween package, so this is probably where I would see those primitives getting added to.
Similarly you could name them createTween and createTweenEffect, just to avoid confusion—solid already has use/startTransition primitives.
The createTweenEffect should probably also use requestAnimationFrame internally, since it's an API meant to be used to apply animations.
Could you please look at the existing tween package, and see how the API should look like? (don't know if the existing primitive is doing something different) And then I would love to see it laid down as code snippets, so we could get an overview of the exports and usage.
But yeah, I'm excited for this, I think I find myself needing such primitives from time to time.

[q1b]

Yes, So I see there was missing easing, support as well there wasn't much need for this, but yup! I have migrated flutter Curves It's just looked cool to me, I try to find out feature complete library but could not find ONE,
It has bounce and elastic easing support as well still need to migrate one more easing, but it's enough I think, anyway you can check link playground It's available there, nothing solidjs yet, but yep if you got sometime, take a look at it.

[q1b]

@thetarnav Hey, how are you hope!, doing great I found a way which is working perfectly, fine right now! at least on the laptop that I have.
I have introduced new features in createRaf which are providing, a start restart resume pause exit, but these aren't features but right now, also providing a consistent time in the createRaf as callback

dropping, a example

const { start, resume, pause, restart, isRunning } = createRaf((time) => {
    console.log(time)
    // there is internal manipulation, with timestamp provided by requestAnimationFrame function,
    // So, when you call `pause()` "time is going to pause" and 
    // when you call `resume` "time is again start from where it left last time",    
    // when you call `restart` "time is again start from 0milliseconds"
},{immediate:false})

Need some testing on other browsers like safari So, do you have a macbook,
If you have tell me, I will send you my local code, please review it.

Dropping a preview video, don't get confuse by the screen, See console logs there I log the timestamps

Loom.Message.-.9.August.2022.mp4

[thetarnav]

Sorry for the silence @sacarvy. I got too much into making devtools and moved aside everything else 😅
Will try to review your ideas soon 🤞

[thetarnav]

Sorry, no macbook here :D
@davedbase Pretty sure you have one, so if you have some CPU time to spare...

Adding resume and pause is interesting, but not sure how necessary it is. I mostly imagine RAFs as running tasks, that you can pause if needed. It's more about general control. What are a few milliseconds of one-time difference?

The easings, on the other hand, are just great. It's what we need, no more to say.
Well, I can say that I would probably prefer them to be in a separate export, rather than some Curve object.

import { createTween } from "@solid-primitives/tween";
import { easeInSine } from "@solid-primitives/tween/ease";

const tweenedValue = createTween(myNumber, { duration: 500, ease: easeInSine });

[davedbase]

Yup, I can have a look, do you have any instructions to run the specific test you'd like? Just some details so I can report back with useful information.