Static to Interactive: Transform Infographics into Interactive Graphics #236

Hi Julie

Thanks for the feedback I really appreciate your encouragement.

Here's what i did

First I produced the background image for the pop-ups in Canva (the 6 blue rectangles that get progressively darker). The image is the same width as the story size, but much longer (as each blue rectangle is only slightly smaller than the slide length). This is what you see moving upwards when you 'drop' the diver. I had a separate layer per zone, each with a copy of this image all initially positioned with the top rectangle over the slide. I added a motion path upwards on the image on each layer, triggered when the layer opens and changed the end point of the motion path on each layer so that the image stops with the correct 'zone' over the slide area. The diver then exits on a motion path triggered when the animation completes for the background image. The initial view is just a series of rectangles that open the correct layer when clicked.

I hope that makes sense!

Best wishes

Stephanie