Forum Discussion
Morph Animation Not Working with Background Image
Hi everyone,
I’m working on a small animation in Storyline that relies on the Morph transition between slides. The concept is to create a carousel of numbers representing a year, where Morph handles the smooth transition.
Here’s what I’ve done so far:
- Each digit of the year is displayed using a text box that contains the numbers 0–9 arranged vertically.
- To show only the intended year, I added shapes that mask the top and bottom parts of these text boxes.
- To make these masking shapes blend in, I applied the same image as the slide background to them.
However, this workaround does not work properly with the Morph transition—the animation doesn’t behave as expected.
I’ve attached my file so you can take a closer look. Any ideas on why this happens or suggestions for a better approach would be greatly appreciated!
Thanks in advance for your help.
5 Replies
Hi kimmm, Morph doesn’t work well with masked shapes using a background image because Storyline treats them differently than plain objects. A better approach is to place the numbers on a plain shape or separate layer without the background image applied, or use separate slides for each number with Morph applied directly to the text boxes. This usually preserves smooth transitions.
Hi there,
The issue you’re running into isn’t actually caused by the morph animation itself - it’s caused by the “masking shapes” that use the background image. Storyline treats those shapes as independent slide objects, even if they look visually identical to the background. When Morph runs, it tries to match objects between the two slides, but:
- Background-image shapes are not true masks
Storyline doesn’t support real masking, so when you place shapes on top with a background image fill, Storyline still animates them as regular objects. During a morph transition, Storyline tries to interpolate changes between shapes across slides, which often causes:
- flickering
- jumping
- incorrect start positions
- objects appearing briefly
- or Morph not triggering at all
Because these “mask shapes” are visually identical to the background, Storyline can’t reliably match them from slide to slide → so Morph fails.
- Grouped objects (your number columns) often break morph transitions
If the number strips are grouped or have multiple text elements inside, Storyline may interpret them differently between slides. That also causes the morph to stop working reliably.
A Better, More Stable Approach
Use a real masking setup (the “window method”) instead of background-filled shapes.
Steps:
- Create one tall column of numbers (0-9) in a single text box or save it as a PNG.
- Place that tall strip behind a solid rectangular shape that acts as the viewing window.
- Make the window’s fill color the same as the slide background — not the background image.
- Align the window exactly where the digit should appear.
- On each subsequent slide, duplicate the entire slide and only move the tall number strip to the new Y-position.
- Apply the Morph transition between the slides.
This works because:
- The masking window stays perfectly still
- The tall number strip is the same object across slides
- Storyline doesn’t have to morph any background-filled objects
This method is the same one used for slot-machine, odometer, and counter animations in Storyline, and it’s 100% stable.
Hi Hilla,
Thanks so much for your detailed reply! I tried to follow your suggestions, however some of the steps didn’t work as expected for me, which is why I experimented a bit further. Maybe what I’m aiming for isn’t fully possible since Storyline doesn’t use true masks, as you already stated.Here’s what I did:
- Kept the number columns as they were, as they already behaved exactly as I wanted.
- Instead of using two strips to hide the number columns, I created one shape and cut a “window” into it by merging two shapes beforehand.
- Added a standalone background image to the timeline (not as slide fill). I did this because the “fill shape same as slide background” option doesn’t differentiate between color-fill and image-fill, and I need an image background. If I misunderstood your instructions here, Hilla, please let me know!
- Filled the window shape with the same image.
- Duplicated slides, moved the number strip, and applied Morph.
As I said, this works better with solid-color backgrounds, but with an image background, I still couldn’t get the effect I wanted.
If anyone has tips or alternative solutions for achieving this with a background image, I’d love to hear them!
Try looking at this example project (attached).
https://360.articulate.com/review/content/927fea12-9ba9-4511-b2ea-52600eae0a31/review
Although they can look nice, I rarely use morphing transitions because the effects are applied inconsistently. I don't have the experience to know what exactly affects this application. This example is as I envisioned, but the application of the morph effect is not really as reliable as I would want in practice.
The keys are:
- Envisioning how your slide objects need to be stacked in order to see/hide what you want
- Knowing what to mask to ensure the transition displays as you intend
- Making sure the positioning is correct
- Ensuring all of the morph IDs match between the objects across the slides
For 1 and 2, start with single elements. Work out the transitions, test the effect, and then add on additional elements as you get things working.
As for 3, Storyline seems to calculate the on screen positioning of elements. This may be through CSS or directly, but it is likely percentage-based or some other relative positioning. This creates rounding issues and can cause objects to shift around on the slide by a pixel in one direction or another. When trying to do advanced effects like masking with tiled images, they are almost impossible to get to stay in the position you need. They always shift, leaving obvious gaps as the slide size changes (due to differences in the browser window size). It creates a huge problem. Overlapping image edges slightly hides the gaps, but also leaves obvious seam lines if you fade things in and out. In this example, I feathered the inner edges of the top/bottom mask image on slide 2. This allows the edges to blend together and allows any overlap caused by position shifts to be minimally noticeable.
Finally, for 4 I usually get one slide edited as I need it, copy the the morphable objects I want, delete any previous versions of the objects from the target slide, duplicate the new elements onto the target, and then make any adjust I need for the animated effect. This way I always ensure that my morph IDs are up to date and match between slides.
