RFC: Support for multiple transitions

[DaveKeehl]

The situation

The main reason why Svelte Reveal is still in beta is because I really want version 1.0.0 to support multiple transitions from day 1. In this RFC I would like to talk about my ideas regarding this new feature, and hopefully get some feedback from the community.

The problem

In my opinion, Svelte Reveal's current biggest limitation is that a base transition property is always applied by default. To provide a bit of context, if you have the following Svelte snippet:

<script>
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal>Hello world</h1>

A transition: "fly" option will be applied by default, which will make sure that the <h1> element is revealed by transitioning the opacity from 0 to 1, and the position along the y-axis from -20 to 0.

You can of course override this transition. So if you have this other snippet:

<script>
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ transition: "fly", y: -50 }}>Hello world</h1>

The element will start transitioning from -50 instead of the default -20. However, the problem arises when you want to provide options that are outside the set of CSS properties that your transition works with. So, if you have this other snippet:

<script>
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ transition: "fly", y: -50, x: -50 }}>Hello world</h1>

The x option is completely ignored, as the "fly" transition doesn't use that option. This is very limiting and it needs to be addressed.

My proposal

After some careful consideration, I have come to the conclusion that in order to offer the best DX possible, multiple transitions shouldn't be a feature... rather a side-effect! A side-effect of a slightly different model of creating the transitions. Multiple transitions shouldn't be a thing you carefully plan to use, they should be the result of playing with multiple options on a single DOM element that needs to be revealed.

Hence, I propose to rename the transition option to preset. It might look like a small change, but it would actually have big consequences. In particular:

1. No transition would be applied by default anymore
2. Pre-defined transitions would become optional
3. No more constraint on which options can be used for certain transitions

Presets would just be an optional starting point. You would be free to choose whether to start from scratch, or whether to start from a preset and add your own few bits on top of it, with the difference that any option could be used to extend a preset.

// FROM SCRATCH

<script>
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ x: -50, y: -50 }}>Hello world</h1>

// FROM A PRESET

<script>
  import { reveal } from 'svelte-reveal';
</script>

<h1 use:reveal={{ preset: "fly", blur: 100 }}>Hello world</h1>

Extensible presets

This new model could also serve well to new exciting features, such as the ability to create your own reusable presets via the Svelte Reveal's API.

Notes

Despite all these changes, I think it could still make sense to transition the opacity by default.

[DaveKeehl]

Closing this discussion as this feature has finally landed in version 1.0.0!