Text animation

[cool11]

I would like to create a rather simple but possibly even stunning animation with a few words, for use in a web page.
Back in the old days I had in my mac a simple and effective application, called 'text osterone'. It no longer works. It did just this task, and did it well: animated text for use in web pages.

I am searching all the options I can possibly have.
As I said, I have a dozen of words, that I want them to be rotated in a specific short time period (seconds), using animation. Each word at a time, not all at once.

I saw some online banner or text generators, but nothing good appeared to me. I hope there was one, so that in a few minutes I could have my task accomplished, shortly and easily. But is there such a thing?

I also checked solutions in javascript/css. I have to admit I saw good solutions with these. But, it seem to depend on external resources, and I do not want it for my site.
I want something independent, a standalone solution, either is a script, or file.

I am thinking about Motion and Final cut or even Premiere, but I know, it is 'too much' for this purpose.
But, if you tell me that this is the best way to do it, I have some friends with these applications and I think I can get my hands on this.
In the past, but it was many years ago, I had used Motion, I remember I liked it a lot. I am not so sure about the learning curve though. I have also used Premiere, back in the old ages. Which one is easier for my task, if we choose one of these?

But even if you suggest me that these are the best solutions for my case,
I want for sure to tell me, that the final animation can be exported in a very tiny file format of some kilobytes at max!!!
Remember, we do not talk about tv-video commercials(no problem in filesizes - only quality matters), but my purpose is to create a really good text animation for use in web page.

So, this is what I wanna do, and my thoughts about it.
Please feel free to leave your suggestions in every possible direction (the above mentioned apps, other apps, online services, etc), and I hope to find the best suitable way for this task.

 

[Dave Braine]

Keynote can do that for you. You can then export it as a video file.

 

[960design]

Google Fonts + CSS ( keyframes ) will do that nicely.
Or you could use a little vanilla JS.

Go fancy and add some vw to your font-size for responsive, any screen size friendly text.

 

[cool11]

Keynote can do that for you. You can then export it as a video file.

I will take a look for sure. I hope that is easy. Any tips about file size?
[doublepost=1554184081][/doublepost]

Google Fonts + CSS ( keyframes ) will do that nicely.
Or you could use a little vanilla JS.

Go fancy and add some vw to your font-size for responsive, any screen size friendly text.

Something like these ones?
http://tobiasahlin.com/moving-letters/
But if you look at the code, you can see that it depends in a site somewhere on cloudflare, I don't think it is good such tactic.

 

[960design]

Something like these ones?
http://tobiasahlin.com/moving-letters/
But if you look at the code, you can see that it depends in a site somewhere on cloudflare, I don't think it is good such tactic.

Those are pretty cool, but, as you mentioned, rely on an external library ( that you could just download locally, so no need to hit the cdn ).

BUT, you can do it with CSS and keyframe. Just code it yourself. The more complex the animation you are looking for the more complex the CSS animations are going to be. So, just start simple.

 

[Dave Braine]

I will take a look for sure. I hope that is easy. Any tips about file size?

very tiny file format of some kilobytes at max!!!

Probably more than a few kilobytes.

 

[cool11]

Those are pretty cool, but, as you mentioned, rely on an external library ( that you could just download locally, so no need to hit the cdn ).

BUT, you can do it with CSS and keyframe. Just code it yourself. The more complex the animation you are looking for the more complex the CSS animations are going to be. So, just start simple.

Well, I am not interested in coding, so I want something ready to go.
How can I download the js so that I will not need the cdn?

 

[960design]

Well, I am not interested in coding, so I want something ready to go.

I gotcha, I just misread:

I would like to create a rather simple but possibly even stunning animation with a few words, for use in a web page.

.
.
.

How can I download the js so that I will not need the cdn?

Many, many ways, but an easy to understand way. Open the specific url in your browser. Select All, Copy / Paste into a simple text editor ( Notepad++, TextWrangler ), save as bobby.js or whatever you want to call it. Save that new file to your folder structure and now reference the local version.

 

[cool11]

Thanks 960design.

I have used excessively the well known Dreamweaver application back in the old years, so for sure I have a good idea of how it goes with code, though I do not code myself.
But, now I am on the ship of wordpress.

If you take a look in http://tobiasahlin.com/moving-letters/
then I see 3 sections of code:
html, css, javascript.

It is not so straightforward as copying and pasting like in dreamweaver.
Any ideas of how to use these, in wordpress?

 

[organicCPU]

Maybe something like this is easier for you to use:
https://wordpress.org/plugins/animate-it/

 

[960design]

Thanks 960design.

I have used excessively the well known Dreamweaver application back in the old years, so for sure I have a good idea of how it goes with code, though I do not code myself.
But, now I am on the ship of wordpress.

Ouch... yep... create or find a plugin. I hate that Wordpress/Dreamweaver alters an end users code by adding tags, which will break the simple copy/paste I mentioned earlier.

If you take a look in http://tobiasahlin.com/moving-letters/
then I see 3 sections of code:
html, css, javascript.

Notice the script tag within the html section. That is the url you would visit and copy/paste directly into your page. But, wordpress will make it a paragraph and break it.

It is not so straightforward as copying and pasting like in dreamweaver.
Any ideas of how to use these, in wordpress?

Unfortunately, you are correct. Wordpress does great things for most, but a pain for developers. I currently only build SPA ( reactjs ) applications. About 10 years ago, I had a couple of plugins out there on the WP marketplace. Ahhh, the old days of PHP and MySQL, so quaint.

tl;dr
Try OrganicCPU's idea!