Simple text Animation

Questions
#1

Hello, I’m new to the community so I apologize in advance if this question is not categorized properly or otherwise violates the community guildlines, not my intention.

I want to display text in a simple animation letter by letter similar to:
This.

Think video game captions. The text displays letter by letter as a character speaks.

I’m aware of ember-animated, however I noticed the docs are not written using glimmer components which I’m using in my application. More so I think it’s overkill to have to install the entire addon in my app for what amounts to < 10 lines of code in html, css, and javascript.

I thought I could achieve this effect using the {{did-insert}} hook from ember-render-modifiers with a custom callback that handles the animation logic, it didn’t work so is that even the right approach?

An example of how one might achieve this would be most appreciated. Thank you for your time.

#2

You might take a look at ember-css-transitions, and even if you don’t install it you could borrow from its implementation.

Use of {{did-insert}} (and probably also did-update if you want it to change if you supply the component with more text) should work here; can you put up a link to a sample repo (or an Ember Twiddle) showing how you can’t get it to work? I would assume a very small variant on the jQuery just using (a) JavaScript addition and/or removal of the classes and (b) a CSS transition should do the trick just fine.

#3

Also, welcome to the community, and this is absolutely the right place to post stuff like this! Not off-topic at all!

#4

Hi Chris, Thanks for responding.
I can’t show sample code because for the moment it’s a private project.
However I would like to leave something for the community.

With that being said the gist below is a bit different from my original question because I trigger the animation with a button press, instead of when the element is rendered with something along the lines of

<div id="myelem" {{did-insert my_animation_callback_here}}> </div>

Nevertheless I think it gets the point across. Gist Here

So anyway, whoever else sees this, you can have custom animations like a typewriting effect using the did-insert modifier in ember octane.

#5

Glad you got it sorted!

I’ll take a peek tomorrow if I get a chance; it’s likely this can also be managed with a combination of a custom modifier and some careful use of auto-tracked state—fairly straightforwardly, in fact!