Question about HTML and Elusien's WebVfx - can this file be converted?

I’m hoping Elusien is reading this (!).

I have a question about the attached html file (attached as a txt file). Could this be converted into a WebVfx html file (using Elusien’s WebVfx framework) so it works in Shotcut?

I don’t really understand the “steps” part of the html code to know whether it can be “converted” or not. Thanks!
Typewriter animation HTML.txt (653 Bytes)

Jon

This is the WebVfx equivalent. It isn’t identical as the framework cannot emulate the “steps(100, end)” CSS function. This is a form of easing, like InOutSine, but its function is to produce a type of jerky movement. I might see about implementing it into the framework.

I moved the TOP position from 600px to 200px, so it showed up on my browser without having to use the scroll bar.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Pippi goes walkies</title>

<style type="text/css">
/*@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: black; } }*/

body {
	background-color: #007889;
}

h2 { 
	font: bold 55px monospace;
	padding: 10px;
	position: absolute;
	left: 100px;
/*	top: 600px; */
	top: 200px;
	color: white;
	border-right: 2px solid white;
	width: 45ch;
	white-space: nowrap;
	overflow: hidden;
/*	animation: typing 6s steps(100, end);*/	
}

</style>
</head>
<body data-control='6:30'>
  <h2  class='webvfx'  data-animate='{
		  0% : {width:   0%;} ,
		100% : {width: 100%;}
	}'>Pippi the dog had a lovely day going walkies.</h2>
</body>
<script src="WebVfx.js"></script>
</html>

Neil

Hi Neil, that’s great - thanks! Looks good, works fine. Two questions though if I may:

  1. I’m scratching my head about why it works (!) - ie which part of the code makes the caret move across in steps to reveal the text a letter at a time?

  2. In the original code (css) the caret stops after reaching the final letter. Yours carries on after the last letter. I’m wondering if this can be fixed?

Many thanks.
Jon

PS actually a 3rd question ; how did you get the code to show up in your above post so it shows in a box with scroll-bars ? Did you just copy the text? I’m sure I tried that with my code and it didn’t show properly.

Jon, The text is in a block <h2> that is 42ch wide (a ‘ch’ is the width of a ‘0’ in the font used). The animation starts by setting the width of the box to zero and finishes by setting it to 100% (i.e. 42ch wide), revealing the characters that are “outside the box” and hence “hidden” as it does so.

The property “border-right: 2px solid white;” sets the right-hand border to white, while the top, bottom and left borders do not exist. As the width of the box grows, the right-hand border moves across the page. To stop it at the right point you’d have to resize the width of the box to fit exactly the number of characters. Fiddle about with the “width: 45ch;” to get a more realistic number so it stops just after the last character.

I got it to show up on the thread by putting 4 spaces in front of every line then copy-pasting it into the reply box. This makes it pre-formatted text and it shows up on the thread exactly as it is without any formatting or any messing about with the lines.

Regards - Neil

Hi Neil - I can’t say how thankful I am to you for taking the time to answer these questions - The HTML coding makes a lot more sense to me now, and it will be very helpful to me as I keep learning this fascinating subject. Many thanks and good wishes - Jon