Advanced Tutorial

Transitions between Steps

This icon list section is only visible in Designer and Editor View. On live page you will not see this icon list.

icon-paste.svg
icon-copy.svg
icon-offline.svg
icon-camera.png
icon-flatmode.png
icon-record.svg
icon-audio.svg
icon-pause.svg
icon-play.svg
icon-delete-audio.svg
icon-start-recording.svg
icon-stop.svg
icon-undo.svg
icon-redo.svg
icon-back.svg
icon-mic-on.svg
icon-target.svg
icon-mic-off.svg
icon-add-user.svg
icon-video.svg
icon-more-settings.svg
icon-next-step.svg
icon-previous-step.svg
icon-more.svg
icon-all-after.svg
Icon previous.svg
icon-ok.svg
Icon-next.svg
icon-all.svg
icon-all-previous.svg
icon-unlocked.svg
icon-locked.svg
icon-select-all.svg
icon-invisible.svg
icon-visible.svg
icon-label.svg
icon-add-object.svg
icon-information.svg
icon-add-steps.svg
icon-remove.svg
icon-lasso-select.svg
icon-lasso-deselect.svg
icon-multiselect.svg
icon-duplicate.svg
icon-delete.svg
icon-rotate-blue.svg
icon-3d-object-blue.svg
icon-3d-icon.svg
icon-knowledge.svg
icon-view.svg
icon-unlock.svg
icon-sub-object-mode.svg
icon-scale.svg
icon-save.svg
icon-rotate.svg
icon-object-mode.svg
icon-move.svg
icon-lock.svg
icon-home.svg
icon-dropper.svg
icon-colour.svg
icon-ar.svg

Transitions across the Steps of a Jig can be a fantastic way of adding animation to bring your models to life. You can also use transition fades to smoothly introduce new concepts and models to scene. A good transition can tell a story in and of itself.

Focus attention with transitions

To draw in the attention of the viewer:

  • Add Labels {icon-label.svg} to an Object or Sub-object with Always show  on a Step. (Helps to clarify what part of the model is being discussed.)
  • Change the Color {icon-colour.svg} of an object to attract an attention and highlight its importance.
  • Use Transparency {icon-visible.svg} to create a fade effect when bringing an object in or out of a scene.
Here we have faded out the top case, and added a highlight color and label to better show the 'Straw walker' .

Transparent transitions

Adding transparency to reveal hidden parts of an Object or making Objects Invisible {icon-visible.svg} changes the focus of your Jig.

To add Transparency:

  1. Tap the Object you wish to change.
  2. Select the Color tool {icon-colour.svg} on the toolbar to open the Color Menu.
  3. Press the Hide tool {icon-visible.svg} to turn the objects transparency OFF or ON
  4. Drag the slider bellow the Hide tool {icon-visible.svg} to change the level of transparency.

Animating transitions

By animating your Objects using Move {icon-move.svg} and Rotate {icon-rotate.svg} tools over multiple Steps you can use the transitions to help show how parts of your objects are designed to move together.

We recommend setting up your movement transitions before adding in transparency so you can see what your doing more easily. When making your Objects transparent we recommend selecting them in Object Mode {icon-object-mode.svg} rather than Sub-Object Mode {icon-sub-object-mode.svg} as this will save you a lot of time selecting everything individually.

Scaling {icon-scale.svg} an object can also be a great way to draw focus to a specific object or part of a Jig.

Transition between first and last Steps

The transition between first and last Steps of a Jig is what users usually forget to check.

Because Jig gives the option to move freely back and forward, it is easy to loop and go from the last Step back to the first. It usually doesn't look great.

To avoid messy transitions you can copy the last Step of your Jig, and bring it to the first Step. Here you can use whatever tools you need to smooth out their transitions. (This will often include repositioning and scaling models on the last step to match the first.)

After you finish your updates don’t forget to replace and delete the unedited Step you copied.

These clean transitions will give your Jig a more presentable and professional look.

Note: Based on the JigSpace team’s experience, too much movement between Steps can look a little bit messy visually. So we sometimes spread out transitions between a few Steps.

Download Icon
JigSpace project file

Download this free Jig file to follow along — step by step — with the tutorial.

Jig App Logo
New to JigSpace?

Download the latest version of JigSpace to get started

Jig quick tip

Text text

Last updated on
Friday, October 1, 2021
Not a Jig Pro user yet?

Start 14 Day free trial today and start creating complex presentations
that will delight your users.

Start 14 Day free trial