Quick Tips


Add Elements: Add elements to the stage by clicking one of the create element tool buttons on the top bar. Then drag create the new element with the mouse directly onto the stage.

Nest Elements: Drag and drop elements on top of each other to nest. Or drag create new element while in an existing element. Elements can be nested to any depth.

Tip: Nested child elements are positioned and styled relative to the parent. If the left mouse button drag and drop nesting feature is disabled, the right mouse button may be used instead.

Edit Style Values: Click a gold colored value in the left tree to open a popup input box. To perform a quick change drag the gold colored value left or right.

Tip: Non numeric settings which have a set group of possible settings will rotate through the options when dragging the gold colored value in the left tree. (e.g. font-family will rotate through arial, helvetica, courier, etc...)

Adding Timeline Keys: Click a style values diamond button (left tree) to add a new key frame to the timeline. The key will be added at the position of the playhead.

Tip: If the playhead is after an existing size or position key, keys will automatically be added when dragging or sizing elements on the stage. If keys are not auto added to the active timeline, your drag and size stage edits will be applied to the default stage / ready timeline.

Timeline Selection

Setting The Active Timeline: Animating stage elements and CSS rules first requires selecting an active timeline (by default the root stage elements document ready timeline is active and selected). NodeFire supports unlimited timelines for each stage. A single timeline is active and may be edited at any given time.

The active timeline is a combination of the selected event target element and event action tab. The event target element can be any element on the stage, or the root stage element itself. The event action tabs are directly above the timeline and determine the action on the event element which will trigger the timeline (document ready, mouse over, mouse click, etc...)

Tip: To quickly switch between your stages defined timelines click the timline action event associated with your elements in the right reference tree.


Publish To HTML: Quickly publish your stage by choosing "Publish [Get Code]" from the main control menu. The code required to run a stage is in two simple blocks. Paste the stage JavaScript to the head and the stage content to the body of your document. Multipe stages can be published to a single page, the NodeFire JavaScript code does not need to be duplicated.

Tip: At the bottom of the "Get Code" dialog are options which allow the stage to run in all browsers or just the modern browsers. You can also enable SEO content.

Working In The Cloud

Google Drive: Stages can be saved and opened using the Google Drive cloud. If you do not have a Drive account, you will be propted to sign up when accessing the cloud features in NodeFire. To save your stage to the cloud choose 'Save As' from the main control menu. Your cloud saved stages will be accessible from, and may be saved to the 'Google Drive' folder in the left tree. Open your cloud saved stages from the same folder when using the main control menus 'open' option.

Tip: Clicking the 'Google Drive' folder will refresh the list of saved cloud stages. This is usefull when collaborating with others on shared stage files.

Google Drive Interface: The Google Drive interface can be accessed by clicking the logo image when the 'google drive' folder is selected in the 'open' or 'save' dialogs.

Stage files can be shared, renamed, deleted, organized, and opened for editing in the Drive interface. To open a stage for editing right click the stage and choose 'Open With' --> 'NodeFire'. To set NodeFire as the default application for stage type files right click a stage and select 'Open With' --> 'Manage Apps'. Then check the 'use by default' option next to the NodeFire icon.

To create a new stage click the red 'create' button in the upper left and choose 'NodeFire' from the list of availalbe application options.

NodeFire Animator
Create interactive HTML5 animation effects and widgets (banners, slideshows, drop down menus, text effects, 3D animations, layouts, and more).
Latest release - v5.2
8/8/2017 - Includes new device, preview, and file interfaces! (more...)
Other Products
Web Effects
Easy to edit effects
for your website.
Follow us:
Copyright (c) 2016 - NodeFire Inc., All Right Reserved.