Repeatable animations

Animation
1

Does Hype have a way to make a repeatable animation action? Almost like a symbol, but without a specific element inside.

For example, if I want each letter in a sentence to jump up in exactly the same manner, only at different times, is there a way to apply a single Origin (top) action to each letter and then, if I decide I want to modify the value, I can change a single number and all instances are affected?

I thought maybe I could create a symbol of an empty nested group with the animation applied to the inner group and then slip my element inside instances of that symbol, but I guess that’s not possible.

I did see this conversation on the forum that leads me to think I can’t do what I'm hoping to.

880×440 2.02 MB

2

You are correct that there is not a built-in structure for this currently as there is not a symbol equivalent for just the animations. Symbols require elements to all be the same.

However, there is a new project that allows for symbol overrides that could probably be employed here. See:

I imagine you could just override the innerHTML property, and potentially apply this to multiple elements like the bouncing text as well as the shadow.

To offset the animation timing, I'd probably just change the start time of the symbol action on its parent timeline.

1 Like
3

You can do this after including the script with one line of code using Hype Data Decorator mapping data-label to the class .label. The decorator defaults to setContent being an action that sets innerHTML if the corresponding CSS class is an endpoint. You could, of course, use any other name. You can also download the Hype Data Decorator if you don't want to link it through the CDN.

Head HTML:

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeDataDecorator/HypeDataDecorator.min.js?"></script>
<script>	
	HypeDataDecorator.mapDataAttribute('label');
</script>

CleanShot 2021-04-13 at 21.54.16@2x
CleanShot 2021-04-13 at 21.54.16@2x2296×1794 281 KB

  1. Now just assign data-label to each symbol and set the content
  2. You can reuse the same symbol with its animations
  3. You can trigger animations with symbol actions and offset them or use different ones

simple-decorator-mapping.hype.zip (22,4 KB)

3 Likes
4

:open_mouth: Both very cool options that I was unaware of. My wheels are turning with ways I can use these on projects. Thanks @jonathan and @MaxZieb!

2 Likes
5

I've been playing with the Hype Symbol Override and lovin' this additional functionality. There's one instance where I can't get it to behave, which could be 100% user error.

I can't get an override to alter the fill color of an SVG. I've tried both an embedded SVG and an HTML widget with the SVG code. My sample file here has background colors applied, just to show that I've got the override extension configured properly.

Should I be able to do this?svg fill.zip (28.4 KB)

6

In Hype SVG's are used as a background-image. Hence. You can't use fill on them as the markup is not part of the DOM. Just inspect the HTML and you will see the problem.

1 Like
7

Oh! Makes complete sense.

8

See this post in regards to fill.