Responsive animation in Blocs

For those that may like to include additional animation features in websites built with Blocs, it’s very easy to do with Temult Hype. Here is a link to a very simple header design created in Hype and added to a Blocs webpage. When the page is open, adjust the browser window size to see how it changes to suit the different device widths for iPad portrait and smartphones. It should also be noted that although the text content of the header is part of the animation, it remains as selectable text, so it can be read by search engines.

I thoroughly recommend Hype as a web animation tool and it makes a perfect compliment to Blocs.

Animation example

4 Likes

That’s cool. Thank you for sharing!

Thank you very much for this great tutorial :slight_smile:

Wow! That’s cool! I saw Hype on the Mac App Store a few days ago and thought it was really cool. Your tutorial is tempting me to buy it.

Great! Thanks, who has the code with can be copied? :slight_smile:

actually Hype is generating the code, you just have to copy it to your html. check this link and scroll down in it for different export options and also check the video in the link on how to embed the code in your html.

https://tumult.com/hype/documentation/3.0/#preview-amp-export

Thanks, for the tip!