New swipe (wipe) transition using CSS animation generator/converter

[jonray]

For fun (and experimentation) I just designed a new swipe transition and used @elusien’s css animation converter. It involves 20 vertical blue strips fading in/out in a synchronised way to give horizontal movement effect.

Result:

https://streamable.com/5h2bn

The HTML works fine with opacity changes but then I’ve hit a problem and I need @elusien’s help if possible.

I wanted to design a similar wipe but with the blue bars moving downwards (I was then going to rotate them 90 degrees to get a horizontal movement), so I tried animating the new animation with the keyfames

  @keyframes move01	{	
   0%	{top:0;	}
 100%	{top:600; 	} }

(moving the bar down 600 pixels, just as example).

Now, using keyframes, the animation worked OK in Chrome, but once I converted this code to JS, and hid the animation line, the animation failed to work.

I’ve scratched my head why this doesn’t work for an hour, and would dearly love to find out why it won’t!
@elusien, I wondered if you might take a quick look if you have a spare moment or two and see where I’m going wrong? Thanks!!

HTML files and JS files attached:
Jonray HTML files - transition.zip (83.5 KB)

2 HTML files attached - for the the problematic one I’ve removed the other 19 strips for simplicity.

[Elusien]

@jonray

so I tried animating the new animation with the keyfames

  @keyframes move01	{	
   0%	{top:0;	}
 100%	{top:600; 	} }

@jonray, you need to add the unit "px" to become “top: 0px” and “top 600px”. You can get away without it in CSS proper, but the polyfill requires the unit to be specified.

[jonray]

@Elusien

you need to add the unit "px" to become “ top: 0px ” and “ top 600px ”.

Thanks @elusien - I did try that earlier, but it still won’t work for me. Does it work for you?

[Elusien]

I changed the Javascript in the HTML file to:

window.elusien_keyframes = {
"move01" : [
    {offset:0,  "top": "0",},
    {offset:1,  "top": "300px",}
]
};

and I commented out the CSS animation line e.g.:

#Xstrip_01 {animation: move01 2s ease-in-out 0.00s 1 normal forwards }

This works for me. Prior to my changes it didn’t work and the javascript console gave an error message.

Aha - did you put the 300px in quotes? The value 0 is acceptable. If you have it as 0px it too must be in quotes.

P.S. in the example in the zip file instead of 0, 300px, you had 600,600.

[jonray]

(Sorry for delay - had to take the dog for a long walk…)

Yes, it works, so THANKS! I hadn’t thought of putting both “top” AND "“300px” in quotes.

(incidentally does your converter add both sets of quotes when converting say top:600 ? I have no time to check right now but will do so asap). Thanks anyway - I should have tried that.
But I do notice that “opacity”: 0, works without the 0 in quotes. Seems a bit illogical to me…

@Elusien

in the example in the zip file instead of 0, 300px, you had 600,600.

My fault, sorry, I sent the file with the wrong figures.

Thanks again @elusien for sorting me out !!

[jonray]

Interesting - your converter converts
top:0; to “top”: 0,},
but
top:0px; to “top”: “0px”,},
… which of course makes sense because the px is essential for it to work. I get it now!

[Elusien]

@jonray

does your converter add both sets of quotes when converting say top:600

It puts the word ‘top’ in quotes since this is an option. It looks at the parameter ‘600’ but does not do anything with it as it isn’t intelligent enough to know what to do with every parameter for every option. So if it is already in quotes it leaves it in quotes, if it isn’t then it doesn’t.