Animate Content Dynamic Group

[MrAddy (Andrew)]

Hello, hope everyone is well?

I have not spent much time on Hype over the years but came back to it so I could create some animations for streaming. So I have a simple animation that grabs some names and times from an external website and display them. The issue I have it the limited ability I have to show the content.

Take a look at this: Standard Board

And this: Top 5 Pilots

Not very exciting is it, I need to be able to get the group, which contain text elements that receive dynamic content via Javascript, to be manipulated as one. If I grab the sides of the group and pull, only the group box moves not what's inside it.

Can this be done using Hype 3, or 4 ?

[MarkHunte]

Sorry not really understanding what you want to do.

Can you post your project example and some more detail of you goal ?

[MrAddy (Andrew)]

Hi Mark,

You cannot manipulate anything within the group. If I want animate a group of elements, I have to do it as individually, especially text boxes. So unless. want to do more elegant animations, groups are great.

I cannot post my project, it holds API keys to get dynamic data.

Simply put, it would be good to have more options to make stand out animations to groups, and all the elements inside of them. Like a page fold, so that group looks like it floating into place. Just an example.

Looking for inspiration on spectacular animations.

[MarkHunte]

Can you post an example that tries to show what you want with static text.

[h_classen (Hans-Gerd Claßen)]

Well, you can animate any element ... Not just groups ...

[MrAddy (Andrew)]

You can, but if you have 10 elements, in one group, and 10 groups, like the linked examples, you are limited to really do much without hours of work, and more hours getting the timing right....

But my point is, having used Hype since it's inception, more could have been done, and my point at the end is, has Hype 4 more capability to more complex animations in groups.

Perhaps I am just using the wrong software altogether?

[MrAddy (Andrew)]

I can in Motion, but not in Hype no. I wanted to manipulate a group, and all elements in the group to move with it. Can I use anchor points to fix to a group ? Just thought of this!

[MarkHunte]

Select the elements.

Then use the tool bar menu to group them.
To animate a group select the group and use the record animations button.

If the animation is the same for other groups, you can the select the group animations in the timeline, copy them, select one of the other groups and paste.

Thus duplicating the group animations on another group.
You can then fine tune

[MrAddy (Andrew)]

I don't understand what I am missing in my text for you not to get it. totally except its my fault... but still.... frustrating!

I can group them, if I change the sizes by grabbing the square ends, I move the group box, but the elements inside do not move. Just the group box. Is this not meant to happen ?

[MarkHunte]

@MrAddy

I can group them, if I change the sizes by grabbing the square ends, I move the group box, but the elements inside do not move. Just the group box. Is this not meant to happen ?

Yes that is expected because you are just changing the size of the group.

Just click and hold the group somewhere near its centre and then drag it. It and its elements will move.

And as to understanding. This is why we ask for an example. Even if it is just one put together for the question.

[MrAddy (Andrew)]

Again, I want to manipulate it, not just move it. As I explained for simple opacity and hiding groups are great. But anything more complex seems not possible, so I have to create each element animated, and make it flow in time.

With 10 elements x 10 groups of elements, that is a huge amount of work. This is only a problem because the elements inside the groups take data from a database, and some data from another website. Each of the 10 elements make up what looks like to be an image. It's just the image has dynamic content.

So it's not possible to make complex animations in this way, which I kind of sussed (although hoped I was wrong), hence the "looking for inspiration" with animated effects. This also seems out of reach for Hype, unless Hype 4 has greater capabilities. But as I asked that already and no answer I guess it hasn't either ? Which is just as well as I was about to upgrade lol!

But thank you for your time.

[MarkHunte]

There are ways to change elements dynamically.

Maybe have a look at

Introducing Hype Symbol Override Extension - Override Symbol Instance properties -v1.1.4

In the thread Repeatable animations @CheeseDeluxe was trying to change a svg colour fill's color. But could not get the extension to do this. The answers given are correct in regards to how svgs work. But not exactly true that the extension cannot be used to do it. I have spoken to @CheeseDeluxe in relation to what this extension can do. I mentioned to CheeseDeluxe that I have not detailed the below yet as I have not written the documentation nor put together complete examples also I want…

Which is aimed at symbols instances of a symbol element.

Is that the kind of thing you mean..?

[jonathan (Jonathan Deutsch)]

Hype, being a HTML5 creation tool, follows the conventions of HTML, in which a group is a <div> that has its own properties including a size independent of its contents.

This means that Hype's groups are sensible from a HTML perspective, but can be different than other motion graphics tools that don't have the same basis or choose to diverge from their primary format.

There are a few different techniques that might help:

1. Since groups themselves are just regular elements, you can apply scale transformations to them and animate those. Do a record flow like usual, and use the command key down to enter Transform Mode and resize via the group's handles. This will use the Scale width/height and visually change the content sizes.

2. Double-click to enter a group, and then use Command-A to select all the inner contents. Then you can more quickly apply animations/transformations to each element.

3. With multiple items inside selected, changing the sizes will proportionately change all of them.

4. You can copy a single animation from the timeline area, and then if you select other elements and paste, it will duplicate the animation upon all of them

[MrAddy (Andrew)]

I do not think so.

If you look at this link:

https://www.cssscript.com/demo/book-page-flip-animation/

Imagine I want to do this to a group, and the scene has several groups each taking different information.

To know what the image will look like, its best to see my example in the first post: Top 5 Pilots

This looks like a static image, but the data is dynamic. Imagine the flip book example but the images, and text, are dynamic each page turn. I could probably achieve this using CSS/JS on each element. I would rather do this to the group.

Looking at the Top 5 example, that only use 3 dynamic elements, 7 more stats need to be added (hence the 10 elements).

Like an image, I can grab the side and enlarge it, and manipulate it, and thus using CSS/JS make it look like a folding image. If I could do this in Motion ( allow it to inject data ) I would use that. Looking at other software similar to Hype they have more ways to manipulate a shape, but I am yet to learn whether or not they can data dynamic data, and then apply a animation.

Again, looking at the Top 5 example, that is using Hype, I am looking at better ways to animate it onto the screen. This is use for Live Streaming during events I host. The events are FPV Drone Racing. So inspiration etc is, how can I make each pilot (and stats) fly onto the screen that makes it look professional. I am not suggesting a page flip is what I am looking for, but with a group of elements, which are then manipulated and looking like 1 image, I could use several libraries to make it do all sorts.

But the group in Hype does not work that way. So what I am looking to do is not really possible.

I have probably better explained myself in this post. But in my defence I don't really know what I am looking to do, just I want to know what I can do to make it look better than it does.

[MarkHunte]

Grr, sorry the link above went to one of the posts in the extension thread.

It should have gone to the top.

Introducing Hype Symbol Override Extension - Override Symbol Instance properties -v1.1.4

[ExtensionHeadImage1] Introducing Hype Symbol Override Extension Although Hype Symbol instances share all the same HTML properties, child elements , timelines etc of the Symbol. It is often the case that you want each Symbol's instance to use different parameters when they appear on scene. For example you may be using a Symbol to display images and text but want different Images , Text or Colours for each instance. Hype at present does not have this as a built feature. But this extension …

---

But I only posted that anyway because it was not 100% clear to me what you are after. Probably still is not, it may just be me having a bad day and just not seeing what you want to do !!

---

But I am going o keep poking the nest and see if we can get some honey..

You can create a single group with your ten elements.
Add the animations to the elements.

Give the elements a class name each ( so you can target them easier later on)
Make the group into a symbol.
Then duplicate the Symbol however many times you want and add the duplicates to the scene.

Each symbol will have the same animations.
You can have them all start the animation at the same time or stagger the start time via another timeline etc..

You have not said how you are loading the dynamic data but that would need to target each symbol and querySelect() each class to add the data to the inner elements.

[MarkHunte]

To go with what I just posted.

This is an adaption of a blog feed element I use. I normally only have one symbol but in this I have added a duplicate which inherited the same animations but use the code to give it different data.

With this it was pretty easy since the symbols are calling the js, which means they become the element in the loadPosts(hypeDocument, element, event)) function.

feed2.hype.zip (64.5 KB)

To see this working in preview I would suggest using Safari.app and use the developers menu to disable Cross-Orign Restrictions

[h_classen (Hans-Gerd Claßen)]

if you are looking to do a morphing-like-animation to a group and its contents ... you might be better off using canvas or webgl ...

regarding the pageturn: there've been a few attempts in the forum to include an external library doing this ...

[MrAddy (Andrew)]

I see, that is certainly a nice way to present the information. Simple, clean, and something different.

Lets say we want to have the text fade in, big to small, moving into place. So it looks like the text is being thrown onto the board?

Currently I could do this now, but would need to be done per element, and matched timings to they flow together remembering the text will be different sizes. Each element would need its own ID. This is where your override would be required because if I made a symbol each element inside the group would have to have a different ID for the data to be added.

I am sure you can appreciate how much easier all this would be if we grouped elements together, and they worked together.

[MrAddy (Andrew)]

I have used them successfully in the early days, but nothing like what I am attempting to do now. I can do it on elements, I just want to do it on groups, where elements are parented so any manipulation to the group effects all elements.

So libraries that I have looked at so far will not work on groups in this case.

[MaxZieb (Loves Hype)]

You can also just use symbols in combination with Hype DataMagic or Hype DataDecorator. That is pretty much the use case for them. Reusable symbols combined with dynamic data. The difference is one uses an external data source and pointer to branches the other solution works more low level and directly from the additional attributes.