Today the solution is  to "handle responsiveness with code."  You can show/hide different animations based on your medium/screen-size, and you can scale individual animations using your own transforms or the built-in sizing: 'stretch'|'cover'|'contain'|'normal' options, which behave the same as in CSS:

  • If you set it to cover  then it will fill its container by clipping outside the boundaries of the container if necessary.  
  • With stretch it will fill by distorting (doesn't respect aspect ratio).
  • Using contain it will fill without going outside the boundaries. It will make sure that nothing gets clipped out of the window, and will shrink contents instead.

You can pass the sizing option when you initialize your Animator.

Here's a CodePen showing the different sizing modes (commented out in the JS snippet) and the docs that show all of the embed options (though the docs show them in a React context, these same options can be passed into the config in vanilla JS as well, as shown in the former CodePen.)

Troubleshooting

If your animation doesn't show when you embed it using sizing :

  • Try applying a fixed height to the container
  • The mounting may be occurring before the style that specifies height is first applied (e.g. if that height is being applied via React/Angular/Vue). Even without Angular/React/Vue, this is classic "jquery" territory ($( document ).ready( ) Essentially, you'll want to mount the Haiku Animator component only after the document is ready, so that Animator Core's initial measurement of its container is correct. You could look into using a listener like DOMContentLoaded, or even try a hacky approach to wait a fixed amount of time before mounting  setTimeout(()=>{//mount component here}, 500)

Will there be another way to do this in the future?

A near-to-medium term roadmap item is "Layouts", which will have responsiveness built in.  

Another piece that's coming soon is the ability to reference screen & container size inside expressions, so you could handle responsiveness by responding to $screen.width or $container.width.

Stay tuned!

Did this answer your question?