Forum Discussion
Animated text
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/#1
Any 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! :)