Simple Layer Revealer (Version 2)

Template Gallery
1

CleanShot 2021-09-22 at 06.08.05

Here is another version of this idea. It is simplified as in:

  • It allows only one revealer per scene or (and this is new) symbol
  • groups or elements to be revealed can only reside on the top level of either a scene or symbol and must contain the class name revealer and a unique class name (for example red)
  • all groups are initially hidden. Only if the class name default is added are they initial visible
  • to create a reveal trigger, add data-revel with the value of the group to reveal like green

Simple setup demo:

CleanShot 2021-09-22 at 06.06.12

Custom behavior signals (optional)

  • Each trigger action emits a custom behavior called like the group name (for example: clicking on a button with data-reveal set to group2 would additionally emit the behavior group2. If the trigger resides in a symbol, the custom behavior is prepended by the symbol name (for example: if the symbol name is Symbol and the trigger group2 the custom behavior would be Symbol group2.

Nested setup

A simple nested example is included in the download as well:

CleanShot 2021-09-22 at 06.17.07@2x
CleanShot 2021-09-22 at 06.17.07@2x1200×600 38.9 KB

This version is easier to grasp if only used in a scene and straightforward to nest, using symbols as the container for a specific logic.

Download:
Revealer.hype.zip (59,0 KB)

6 Likes
2

Slight update on the downloadable file: The emitted behavior now is …

In scenes:
reveal GROUPNAME for example, triggering red emits reveal red

In symbols:
'reveal SYMBOLNAME GROUPNAME' for example, triggering red emits reveal Symbol red

This is totally geeky and optional:
And there now exists an override on symbols and on triggers called data-reveal-behavior that allows to give it a unique name. Say you use the same symbol more than once you could add data-reveal-behavior with the value other Symbol to it and the custom behavior emitted would change to reveal other Symbol red instead of the same reveal Symbol red for both.

3

Added the event handling to touchstart and mousedown instead of onclick to avoid missed interactions on touch devices (like Android devices etc.).