Step by step tutorial

Hi Friends,

I love to be the part of Hype community here.

I am bit familier with Edge Animate and CSS / HTML stuff to create animation and website.
But I am very new to start with Hype 3.5 Pro.

I have take a long time to read threw the docs attached in the website. But I haven’t got yet what I am really looking for.

if someone help me to get more advanced tutorials to create the WEB ANIMATION ELEMENTS with Hype?,
Especially I love to add the CODE PEN examples - especially how to and where can I add the JAVASCRIPT / CSS from the CODEPEN to Hype?.

Is their any detailed TUTORIAL about this 3.5 Pro to create the MODERN WEB ANIMATION?.

Thanks in advance for your help!.

Can you give me an example of what you’re trying to replicate?

Codepen splits code into: HTML / CSS / JS

HTML can be inserted within the inner HTML of an element. You would create a rectangle, select it, and click edit > edit inner html, and paste that code.

For CSS, you would put this in the ‘head’. You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector. You may need to uncheck ‘Protect from External Styles’ in the document inspector depending on what you’re doing.

For JS, this is trickier to answer, and depends on when it should run. Most can run as an ‘On Scene Load’ action.

Hi Daniel,

Thanks for your quick respond.

I would like to create a Responsive Sticky Nav bar like the example in codepen -

But I have confused where to add the javascript to the animation if I create with Hype?

Please give me an advice.


I would think you would be able to do this using Hype timelines, layouts and a little bit of JS/JQuery.

This simple example shows the idea of a using a timeline to slide the nav down and JS/JQuery. to check the scrollTop on scroll group and trigger the Timeline forward/reverse

I have not shown the layouts for different size devices… (158.1 KB)

Thanks Mark and Daniel…

I would try to figure out how to add the Javascript functionality to the timeline…


Maybe the tutorial page can be helpful…