Hype Dynamic Camera

Create transformations based on a square defining the view port for animations and dynamic framing. This is based on the old but really great dCam source by @Luckyde.

Release on GitHub:

Example file:

Intro Video

Using a single camera with a stage

The following setup (as seen in the example file):

CleanShot 2021-12-23 at 19.37.24

gets transformed into this motion when previewed:

CleanShot 2021-12-23 at 19.42.53

Using multiple cameras

CleanShot 2022-01-02 at 11.37.00

CleanShot 2022-01-02 at 11.38.41

Example file:


cool one :slight_smile:


Wow, great JS extension for fun and dynamic scene transitions. Easy to use!

1 Like

↑ look at project
1.2.1 Refactored to use a Mutation Observer instead of requestAnimationFrame

Additional Notes:

  • The planned release on GitHub has been realized
  • Disable "Use WebKit graphics acceleration" in Hype to avoid blurry text in Safari
1 Like

Wonderful extension. I love dCam and this update looks to be spectacular. Thanks @MaxZieb


↑ look at project
1.2.2 Fixed inital update regression after switching to Mutation Observer


↑ look at project
1.2.3 Moved the automatic application of the observer to HypeScenePrepareForDisplay

Added a new example file

1 Like

The possibility of multi-camera animation is amazing!

Tremendous work @MaxZieb

1 Like



I came across a small issue, that when using regular boxes instead of a symbol in Hype the transformation is slightly off duo to the way Hype reports width and height including borders. Hence, I added some CSS to create the border on the camera in this example. This CSS was added to the code base starting from version 1.2.4 and remember to avoid Hype native borders on cameras for the highest precision.


↑ look at project
1.2.4 Added border style for IDE, HypeDynamicCamera.hideBorderInIDE, .dynamic-camera-no-border and --dynamic-camera-border

I added the border for the cameras through the extension because adding them using the Hype API introduces calculation problems (as Hype adds the border width in contrast to the default box model). Every rectangle that gets the additional attribute data-dynamic-camera also gets a border. Remove any border in Hype for most precise results. These borders are only applied in the Hype IDE. If you want to disable borders on a specific camera, just add dynamic-camera-no-border as a class. If you want to have a specific border, just define and add a class setting the CSS variable --dynamic-camera-border either as a class name or :root

.dynamic-camera-green-border {
	--dynamic-camera-border: solid green 4px;

I updated all the example files to use the built-in border, rather than one added through Hype.

If for some reason you want to hide borders in the IDE you can add HypeDynamicCamera.hideBorderInIDE() to Head HTML in a script tag.


Flying through letters

As I am exploring animation concepts while playing around with this, I might as well share them here:

CleanShot 2022-01-03 at 23.55.34

CleanShot 2022-01-04 at 00.01.16

Example_fly_through_letter.hype.zip (41,1 KB)


Playing around with parsing skew and I also replaced the one remaining Matrix calculation with a getter from the API. Also, adding support to retain the translation of the stage in a multi stage setup.

CleanShot 2022-01-04 at 15.17.56


This looks great! :heart_eyes:

The creative possibilities multiply. :exploding_head: :smiley:


9 posts were split to a new topic: Using Hype Dynamic Camera in conjunction with drag and drop

Wow, this is amazing and just what I'm looking for to zoom in and out of Valles Marineris hi res image. Brilliant work

↑ look at project
1.2.5 Fixed stage selector to be more user-friendly by adding a new stageFit and exposing showCamera to data attributes

This update introduces new defaults to simplify stage assignment and enable the use of a camera with a different aspect ratio than the scene. It utilizes the same logic as object fitting (contain, cover, and fill, with contain as the default). Additionally, grouping the camera and stage allows for movement within the scene. To conceal elements extending beyond the bounds, set the container to 'hidden'.


Added an intro video. Hope that helps.


The video was a good idea.

@jonathan — This seems like it should be a native Hype feature.


Nice intro video Max. What do you use to capture the screen recording, it's very cool.