Rise Canvas

A new update to fix a number of bugs and UI issues. The main new feature I've added is a text block builder with the ability to add tooltips to text.

Rise Canvas just got animations and screen transitions.

This is the biggest update Rise Canvas has had since launch. The headline feature, entrance animations with screen transitions. Plus a handful of things that have been on the most-requested list for a while. Let me walk through what's new.

Animations and screen transitions

Rise Canvas now has an Animations mode, a fourth mode sitting beside Design and Preview in the toolbar. Switch it on and the canvas changes, each block gets an animation badge showing its current entrance, and a floating controls bar appears at the top with a Play button, timing sliders, and a guide.

Entrance animations

Every block can be given an entrance animation, fade up, fade in, slide left, slide right, zoom, iris, flip, bounce, rotate, and more. When the component scrolls into view in Rise, it plays the entrance. Select any block, open the dropdown in its badge, pick an entrance. Hit Play to preview them all on the canvas without leaving the builder.

Entrances respect prefers-reduced-motion, if the learner has that set on their device, components simply appear without animating. The timing sliders let you set the speed from 0.3 to 2 seconds, and those settings travel with the export.

Screens and page transitions

This is where it gets more interesting. Any block can be marked as In deck, blocks that are deck-marked group together into a screen, and screens are revealed one at a time with a page transition rather than being stacked vertically. Eight transitions are available: push, slide, wipe, cube, turn, iris, zoom, and deal.

So you can have a carousel and a quiz side by side on screen one, hit Continue, and the page turns to reveal a checklist on screen two. Each screen can have its own transition, you set it on the last block in the group.

You can also gate Continue behind a component. Mark a block as Required for completion, and the Continue button stays disabled until the learner has interacted with it, answered a quiz question, completed a checklist, and so on. A visible hint tells them what they need to do.

Entrances inside screens

Entrances and screen transitions work together. When a screen appears, its blocks play their entrance animations, a carousel slides in from the right, a quiz slides in from the left, staggered slightly so they don't all land at the same moment. Hit Continue, the page transitions, and the next screen's components animate in as the transition lands. Back replays the entrances on whichever screen you return to.

Navigation

Decked screens get centred Back / Continue buttons and progress dots beneath the content. The dot count matches the number of screens, so learners always know where they are in the sequence. The Continue button label is editable, so it can read "Next section" or "I've read this" or whatever fits your content.

See it in action in my course in the weekly challenge The man in the middle

New update to Rise Canvas

Rise's built-in carousel/process block is fine. Cards in a row, click to advance. You know the one.

The Card Carousel builder gives you a lot more.

Two modes, one builder

In standard mode you get content cards, icon, heading, body text, an optional image, and your choice of slide, fade or flip transition. Choose how many you want, set your colours, pick a direction, toggle the dots and counter. The usual controls, done properly.

Switch on image-only mode and it becomes something different entirely: full-bleed photos, edge to edge, cross-fading between them. Add a caption overlay if you want, heading and body text over a gradient at the bottom, or leave it clean. Either way it looks nothing like a standard Rise block.

The part that's actually new

Turn on auto-advance and the carousel starts itself. Not on page load, it waits until the learner actually scrolls it into view, then kicks in about a second later. Set the interval anywhere between two and ten seconds. It pauses when you hover over it, picks up again when you move away, and backs off if the learner's device has reduced motion turned on.

Manual controls stay live throughout, so it's never on rails.

What it's good for

A scrolling gallery of site photos. A rotating set of key messages. A before-and-after sequence. Anywhere you'd normally drop in a static image and think "I wish this moved"

No feature updates on this latest build, just some bug fixes. A larger build is due to be launched next week in which I plan to launch the Table Builder, Carousel image only mode with auto advance, and Animated Block Entry Style Builder.

Some people have been asking for guides on how to use the builders; so I've added some as video guides on YouTube

Well a long flight from London to the USA yesterday, on a flight with starlink 🤯, gave me plenty of time to work on Rise Canvas. In particular, working on some of the trickier coding I’d been putting off. 

This update is mostly one big feature, rolled out across the whole tool, plus the run of fixes that came out of testing it! It solves a problem that’s been quietly limiting Rise Canvas since the start - images, video and audio uploads🤨.

Until now, every image you added to a component was embedded directly into the exported HTML as base64. That works, and it keeps everything self-contained, but it has a hard ceiling. Base64 inflates a file by about a third, and a couple of photos can balloon a component to a size that Rise code blocks will scream at you. For a logo or a small diagram it’s fine; for real photographs it isn’t. Some users were uploading huge png files then wondering why Rise didn’t like it!

So there’s now a third way to add an image, alongside uploading a file or pasting a web address, you can simply type a filename of an image, audio clip or video held in your local storage. If you enter something like diagram.png, the component exports a relative reference to that file rather than embedding it. You then bundle the image, audio or video alongside your exported HTML in a zip and upload it to Rise using the code block’s “Upload project” option, which serves the files together so the reference resolves. There’s no size limit this way, a full-resolution photo is no heavier in the export than its filename.

To make that workflow clear, every image field now has a small information link that opens a short guide laying out the three options, upload, web address, or filename with the full step-by-step for the zip-and-upload route. And to stop oversized uploads catching people out, there’s now a 200KB guard on file uploads, try to embed something larger and it’s blocked with a friendly explanation of the better options, rather than silently bloating your export.

The genuinely time-consuming part was getting this working consistently across all sixteen components that take an image, because they don’t all handle images the same way. Some place a picture as a banner, some as a background, some as a draggable thumbnail.

There was also a fix to the canvas itself. When you edited a component that already lived on the canvas and changed an image filename, the canvas occasionally held onto the old version of the block rather than re-rendering it. It now forces a clean refresh whenever you replace a block, so a change you make in the builder always shows up on the canvas.

Thats it for this update; enjoy building!

THIS IS AMAZING! Thank you for sharing such a valuable tool. It couldn't have come at a better time for me, as I am in the middle of creating 6 different types of simulations to reinforce customer service with our workforce. This will be a fantastic tool to test and see how it can help me right in Rise! I so appreciate your generosity in sharing this, and I can't wait to dig in and try it! Thank you again!

I'm a little late to the party but just wanted to chime in that I'm excited to try this out - it looks so cool! My team might be a little more willing to try the code block with something like this too. I'm extremely impressed with all the details you put into it. There are some talented people in this community 🤩

Adding images seems to overload Rise and won't upload HTML. When images are removed, it uploads fine.

Thanks for sharing a great resource. I tried it out.

The only drawback is the "created with the Rise Canvas" hyperlink that shows

 up in the lesson. Is there any way to keep that hyperlink from showing up in lessons?

A good batch of work has gone into Rise Canvas since the last update, a couple of proper new features and a run of smaller fixes that smooth off rough edges.

The component sidebar has been reorganised. With twenty-one components in the list it had grown into a long scroll, so they're now grouped into five collapsible categories, Knowledge & Assessment, Scenarios & Decisions, Interactive Content, Data & Highlights, and Media & Layout. Only one group stays open at a time, so clicking into a category tidies the others away.

The Stats & KPI builder can now show its figures as more than just a counting number. There's a new visual-style option with four choices, the original count-up number, a donut ring, a horizontal bar, and a semicircular gauge. Pick one of the visual styles and each card gains a simple fill control, so you can set how full the ring, bar or dial draws, and the fill animates into place on the same scroll-into-view trigger and timing as the numbers, in your brand colour. Long figures used to risk spilling out of the rings, so the numbers now scale themselves down to fit neatly inside whatever shape they sit in.

The top toolbar was tidied so its buttons no longer wrap awkwardly on smaller laptop screens and the clear canvas button was missing its border and now matches the others beside it. And the zoom percentage in the canvas is now clickable, click it and you can type an exact zoom level rather than only stepping up and down with the plus and minus buttons.

That's gonna be it till next week... Enjoy building 😁