Method to hold an animation state for a specified time in compact form #480
Comments
|
This is actually a regression because we used to have something like this in v1 during early access. I think it should be called
motion-canvas/packages/core/src/signals/SignalContext.ts Lines 197 to 198 in 1c259d0 |
aarthificial
added
b-enhancement
|
Is there a reason that it was removed? Or any other way that you prefer it to be done? |
|
It wasn't removed, per se. v1 had no signals, it used a slightly different api for chained animations: yield* node.x(ANIMATE)
.key(200, 2) // transition to 200
.diff(-100, 2) // transition to 200 - 100
.do(() => {}) // call a callback
.waitFor(2) // wait for 2 seconds
.run(3) // run the chain 3 times.After switching to signals, I think implementing it the same way as |
|
Ah got it. Thanks, |
`SignalGenerator` now has four additional methods for complex chaining:
```ts
yield* circle()
// initiate the generator
.scale(0.5, 2)
// tween to another value
.to(2, 2)
// execute a callback
.do(() => circle().fill('red'))
// wait for one second
.wait(1)
// run the given generator
.run(circle().position.y(100, 2))
// tween back to the initial value
.back(2);
```
Closes motion-canvas#480
Co-authored-by: Samarth Hattangady <samhattangady@gmail.com>
`SignalGenerator` now has four additional methods for complex chaining:
```ts
yield* circle()
// initiate the generator
.scale(0.5, 2)
// tween to another value
.to(2, 2)
// execute a callback
.do(() => circle().fill('red'))
// wait for one second
.wait(1)
// run the given generator
.run(circle().position.y(100, 2))
// tween back to the initial value
.back(2);
```
Closes motion-canvas#480
Co-authored-by: Samarth Hattangady <samhattangady@gmail.com>
`SignalGenerator` now has four additional methods for complex chaining:
```ts
yield* circle()
// initiate the generator
.scale(0.5, 2)
// tween to another value
.to(2, 2)
// execute a callback
.do(() => circle().fill('red'))
// wait for one second
.wait(1)
// run the given generator
.run(circle().position.y(100, 2))
// tween back to the initial value
.back(2);
```
Closes #480
Co-authored-by: Samarth Hattangady <samhattangady@gmail.com>
Description
There are cases where we might want to do some animation, hold it for a certain amount of time, and then move to another.
I have found that it is quite a common usecase in my workflow.
For example, fade some text in, hold it for 2 seconds, and then fade it out again.
Right now, we have to do it like this
This is very verbose, and it means that if you want to change max opacity from 1 to 0.8, then you would have to make
the change in two places.
Proposed solution
I think one solutions that would be nice is to have a
holdmethod.Additional context
I would like to make the contribution myself, but right now, I don't know where the change should be,
My best guess is in
signals/types, in theSignalGenerator.I would appreciate if you could point me in the correct direction.
The text was updated successfully, but these errors were encountered: