Masking Elements by using Content Overflow & Groups

Tips & Tricks
21

I am not sure I understand. why that would be important.

A group creation is not part of any animation and does not need a keyframe.
It is a group(div) on the scene at some position. It is there or it is not and present as an element on all timelines like any other element. ( which also do not have keyframes to indicate creation)

You can change that position and animate the group properties including position with keyframes.
Elements within it are in there at some position which can be changed via keyframes…

Saying all that having an event for element creation would need hype to be able to create/add elements on the fly, something we have asked for in the past. But more in the vain of cloning.

22

Hey Mark,
The part that is important is that when on the timeline the group is created makes quite a difference in how the envelope of the group is positioned.

On the sample I posted you can see that the second line dose not show the text as expected from the masking perspective.

If someone does not understand that the frame on the timeline , when the group is created, determines a significant factor to the mask. I just wanted anyone reading on how to do this masking method to clearly understand this so that they are not confused or waste time.

1 Like
23

I don't see a difference with or without Graphics Acceleration in Safari 13.

24

Thanks for letting me know. I removed that instruction, looks like the bug was fixed.

25

2 posts were split to a new topic: Masking with Vector Tool Suggestion

26

I'm attempting to mask a lower 3rd. But when I use content overflow and animate the overflow up and then right to reveal the graphic. the animation up keeps moving the position of the graphic and not just the position of the overflow. how do I prevent the entire group from moving with the overflow?

27

You'd typically need to animate the content inside the same amount but in the opposite direction to keep it effectively in the same place.

You're welcome to post a zip of your .hype document to make sure this advice applies, but from the sound of it this is what you'd do.

28

thanks that was what I came to but I haven't been able to do it successfully. I have another PNG animation I want to use to reveal the graphic. Unfortunately, my project is too large to upload zipped.
This link is to a zip of the project.

29

You trying to do this ?

Larte 14.zip - held on GitHub

( For those curios about the gitHub Link. It dawned on me that I could just create a gitHub Repo to hold large files over 3MB to link back here on the forum)

30

I think my main tips would be:

  • have the group be the same size as the inside contents
  • animate the top of the group by the same amount as the height change
1 Like
31

yes that is the Idea, the text portion and brush stroke will be revealed as well. how did you get it to stay put? the file doesn't have any key frames visible. I can see the animation on preview but nothing in the editor.

32

thanks, I'll give that a try.

33

I moved the Animation to a new Timeline so you have more control. If all your animations are on the main timeline or all on a single timeline it can become hard to manage the animations.

Video showing you what I did

I forgot to show in the video, that I then start the slide time line from the main timeline using an Timeline action

Screenshot 2023-10-25 at 17.51.28
Screenshot 2023-10-25 at 17.51.281432×450 104 KB

1 Like
34

Thank you, the video was very helpful. I was trying to do it with the record button to animate. I guess that was the wrong way to go about it.

1 Like