Forum Discussion
Animated text
Is there an easy way to animate text that simulates the appearance of the text being typed in? I am new to Storyline. Just started using last week.
22 Replies
I need to learn how to use GSAP then. I'll check out a Learning Dojo video to see if I can work it out.
I too would love to add more text animation but I'm new to Javascript. I attended the recent excellent JS API seminar though.
I came across this site of JS animations which look greats, but when I copy the code and exchange the object for my own (eg I replace all instances of 'ml1' in the example with my own 'TextBox1') it does not work. https://tobiasahlin.com/moving-letters/#1Any ideas how to fix this please?
The code in the examples is this:// Wrap every letter in a span
var textWrapper = document.querySelector('.ml1 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");anime.timeline({loop: true})
.add({
targets: '.ml1 .letter',
scale: [0.3,1],
opacity: [0,1],
translateZ: 0,
easing: "easeOutExpo",
duration: 600,
delay: (el, i) => 70 * (i+1)
}).add({
targets: '.ml1 .line',
scaleX: [0,1],
opacity: [0.5,1],
easing: "easeOutExpo",
duration: 700,
offset: '-=875',
delay: (el, i, l) => 80 * (l - i)
}).add({
targets: '.ml1',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});Storyline has its own particular setup as to how it handles text characters on the page. Half of the battle is identifying, extracting, and restructuring the HTML so it will work correctly with any particular example, such as the one you located. The code you cited also looks like it uses anime.js, which is an animation library. To use it, you would have to load it separately. Storyline includes GSAP (another animation library), so you could adapt the code to use that instead.
The rest of the battle is building the code to create the effect you're after. Below, I've included a link to a typing animation I made for Storyline. It includes some simple character animation using GSAP. Although the effect is not the same as your example, you could look at the included JavaScript to learn how Storyline structures its text boxes, and see an example of how you can isolate and animate individual characters.
Typing or Typewriter Animation for Storyline Textboxes | Articulate - Community
You could certainly modify the code on your example site to work with a Storyline text box, but it would take some work, and a fair bit of trial and error.
Wow Nathan. I love your text type example and great idea with the sliders. Thanks so much. Thanks for the tips too. I have some learning to do! :)
Here is a demo file for how I achieved this.
I love that PowerPoint has this feature, but was frustrated that Storyline did not until I figured out an easy fix (assuming that the text only has one background color, and is not over an image or something else).
I created the text I needed and have it in a white box. This text is 3 lines.
Then, I created 3 rectangles of white that I placed over each of the 3 lines.
All of this appears at the same time at the beginning of the timeline on the slide.
Then, I created exit animations for each of the white rectangles. Wipe, From Left, 1.50 Seconds
The first line exits first, then the second, then the third. You could easily do this for more lines.
It looks very similar to what PowerPoint does for "by letter"
Thank you, Steve! This is exactly what I was looking for. Now I am trying to tweak it so the next doesn't change to such a small size
I'm glad that this older conversation was able to help you as well, Rumen. I appreciate you popping in to share, and welcome to E-Learning Heroes. 😊
Hey Danny! I also wanted to mention that replying via email includes your signature with contact information in the public forum. Feel free to edit your replies here!
Thank you Alyssa.
"Unfortunately I know nothing about programing/script writing."
The perfect starting place for a Javascript obsession:) Copying and pasting the script into a JS trigger this one should work for you as long as there's only one text block you want to type per screen.
If you run into problems or need help troubleshooting, you've got us to help. JS is such a handy thing for devs to learn. It's a like another language and is a great tool to have in your toolkit. Opens up doors on the web.
I know this was posted a few years ago, but I just started my SL journey recently and this was super helpful. Sucks that you can't preview it, but I love the effect.
That is great Steve!
Finally got a few minutes to test out the theory. Works out pretty well. You would need to modify it to use multiple different text blocks. I ended up speeding it up to 150ms as the base instead of 400.
2 variables: textInput and textOutput (case sensitive)
2 triggers: set textInput to "YOUR TEXT" when timeline starts + Execute Javascript when timeline starts with the script above pasted in.
Put your text block on screen with %textOutput% typed in.
https://360.articulate.com/review/content/3cb90e7b-4fd5-4847-8c5f-34b024f82b0c/review
i am new to this, can anyone simplify this?
That is exactly what I want. Unfortunately I know nothing about programing/script writing.
