daybrush / scenejs

🎬 Scene.js is JavaScript & CSS timeline-based animation library
https://daybrush.com/scenejs
MIT License
2.73k stars 156 forks source link

Typewriter effect in reverse #87

Open usmanpakistan opened 1 year ago

usmanpakistan commented 1 year ago

Hi @daybrush

Any idea how can we run the typewriter effect in reverse? I have tried the sceneItem.setDirection but it does not produce the desired effect. Please see the attached gif as a visual example of the effect I need 1bd625c473bc82a2e8f053af7a34399c

Secondly can we integrate other animation libraries to produce effects not available in this library.?

daybrush commented 1 year ago

@usmanpakistan

Try using direction: "reverse".

or try something like this

typingItem.setDirection("reverse");

const sceneItem = new SceneItem();
sceneItem.set(typingItem);

If not, how can I know which sceneItem or scene the typing code is applied to?

It provides something called @scenejs/effect, but it is typed by character.

import { typing } from "@scenejs/effects";

typing({
    text: "Make a typing effect with Scene.js.",
    duration: 7,
    delay: 1,
    direction: "reverse",
  })

https://codepen.io/daybrush/pen/ydOVPW