Hype Symbol Progress

Extension Project
1

HypeSymbolProgress
HypeSymbolProgress1200×630 84.7 KB

The goal of this helper is to use a child timeline on a ‘progress’ element to drive the main timelines animation to a certain percentage of its duration while keeping timeline, click and drag actions functional. Great for dynamic charts.

For the next update to this I am thinking about including an In and Out Point instead of only the simple percentage. You can drive any symbol’s main timeline by

  1. assigning symbolProgress() to symbol load
  2. creating a rectangle in the symbol and adding the class ‘progress’
  3. animating it’s scaleX either via script, timeline or action
    from 0-100 with the ease of your choice in an additional timeline
  4. use data-percent on the symbol to determine how much to play of it
  5. trigger the additional timeline via a symbol, click or drag action (code also works).
7 Likes
2

It would be interesting to see a quick video of this and how to use it!

1 Like
3

Demo is included in the download. I might make a proper video after releasing Hype Export Magic. Update here is a preview but the animation is rather simple and could be more complex than using a simple line progression.

Preview:
HypeSymbolProgress.html

6 Likes
4

that’s a powerful concept as it allows for absolute creativity.
regarding a usecase as chart-engine it opens up new possibilities showing animated data.
really like it!

1 Like