Splitting Animation Generator

[shshaw]

I want to put together a kind of “precompiler” where you can input your own text, select a default animation and get a CodePen of that put together, with an option to precompile the text or include Splitting.

Set up a simple JS format that would make it easy to add options & new animations.

{ 
  name: 'Horizontal Shift',
  defaultClassName: 'horizontal-shift',
  css: `.${className} { ... color: ${options[0]} ... }`,
  options: [{ name: 'Color', type: 'color', default: '#0F0' })
}

Makes Splitting more than a library and into a tool that even non-JS folks can utilize for simple precompiled effects.

[shshaw]

CodePen API for auto-fill: https://blog.codepen.io/documentation/api/prefill/

{
title: "Splitting: ${name}",
description: "_Generated with the Splitting Builder: https://splitting.js.org/builder_",
tags: ["splitting"],
editors: "110",
html: ...,
css: ...,
js: ..., // If not precompiled
head: "<meta name='viewport' content='width=device-width'>",
css_external: "https://unpkg.com/splitting/splitting.css", // semi-colon separate multiple files
js_external: "https://unpkg.com/splitting/splitting.js" // semi-colon separate multiple files; if not precompiled
}

[notoriousb1t]

This sounds promising

[shshaw]

Very rough mockup: https://codepen.io/shshaw/pen/1bce4dc004805d1028d9311ae1b3b86a

Also need to consider adding image-based split options, much like the effects here: https://codepen.io/shshaw/pen/8c1040cd09079230e3b1be66a6f60ca6?editors=0110

[shshaw]

Perhaps an even more straightforward approach could be better. Simplify the vision for the builder and that’ll make it easier to roll out quickly.

• Text: “Hello World” • Split by: words, chars, etc • Type: animation-delay, transition-delay with :hover • A handful of prebuilt animations