(Below is one technique to mask content, here are a few more ). Most commonly, groups are useful to keep elements organized and aligned as one unit as you arrange your animation. Groups can also be useful to animate a 2 or more elements in the same way: instead of animating multiple elements with t…

Sure! I’m trying to make a simple arrow look like it’s being drawn from point A to point B- starting by moving up, then to the right, then back down (like the top of a square). Basically, if I scale the bounding box to the right, the size of the bounding box animates correctly. If I scale the boundi…

it seems to work if i break down the parts into groups arrow.zip (13.8 KB)

This is perfect, thank you for the help! I’ll give this a thorough look, but it’s exactly what I’ve been trying to figure out.

Hello! I’m new to Hype and learning quickly how much more awesome it is than Adobe Animate. I’m trying to animate the mask of an image and am having trouble. I’d like to have the bounding box start at 0px high then animate to 500px high (bottom to top) without the content inside moving. When I ani…

Here's a bit more clarification on how groups work from @JimScott : [image] Masking Objects Left to Right Animation Hi Cordes! Below is a schematic of the concept. The basic idea is that the “Graph” is grouped with just itself (inside the folder “Line Graph” in my example…

An interesting aspect to consider is “when” you “group” your Object(s) to use the masking technique ( overflow:hidden ). In the attached example there are three separate lines of text and each animate from stage left. The center one was created as a Group at keyframe 1. The others were “grouped” at…

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 h…

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 …

[image] Daniel: Create a Circular Mask : You can create a mask in the shape of a circle by modifying a ‘box’ element and placing it over your masked element: Set the border-radius of the element to 500, and set the border thickness to 200. Make sure there is no fill color, and place your maske…

[image] branislavmilic: I don't see a difference with or without Graphics Acceleration in Safari 13. Thanks for letting me know. I removed that instruction, looks like the bug was fixed.

Hype
Whisk
Reflect
Store
Support
Forums
Blog
About Us

Tumult Forums

Masking Elements by using Content Overflow & Groups

Tips & Tricks

show post in topic

Home
Categories
Guidelines
Terms of Service
Privacy Policy

Powered by Discourse, best viewed with JavaScript enabled

Products

Hype 4
Hype Pro
Whisk
Reflect

Company

About Us
Press
Privacy Policy

Social

Blog
@hypeapp
@TumultWhisk
Facebook
Instagram

Hype Support

Support Portal
Downloads
FAQ
Tutorials
Documentation
Forums

Whisk Support

Support Portal
Downloads
FAQ
Documentation
Forums

Store

Tumult Store
Education Store