Forum Discussion
Morph Animation Not Working with Background Image
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.
After thinking more about this, I realized that morphing the text boxes is the primary cause of the transition inconsistency, as seen in my prior example. To alleviate this, I converted the text boxes to image blocks and inserted those into the slides instead. Now the morph transition is much more reliable.
https://360.articulate.com/review/content/927fea12-9ba9-4511-b2ea-52600eae0a31/review
Since the images don't support recoloring during morph, to change the text color between slides I had to overlay a second set of images with different color text onto the first slide, and then fade that to transparent on the second slide.
So in the end, the morph transition looks rather complicated on the slide timeline, but it seems to work well enough to include into a project. This type of transition is, however, more complex than simple movement and resizing of slide objects, so it may be warranted.
Updated project attached.