One of the biggest challenges in creating an integrated campaign is ensuring that visuals are executed consistently across all platforms. For our Milestones campaign for First Hawaiian Bank, our developer Heather Frantisak embraced our graphic concept, and created new coding to layer the campaign’s iconic animated checkmark between layers of images. It’s pretty cool. Check it out.

From the project, this demo shows how to draw SVG (scalable vector graphic) objects in Meteor that are triggered once the milestones come into view. This SVG illustrates a checkmark inside of a checkbox. The box remains, regardless of whether or not the template is in view, while the checkmark simulates checking/marking off a milestone/bucket list item.

To manipulate SVG’s, we added the Snap.svg library, which is available on Atmosphere. A Snap object must be instantiated by passing in the SVG’s id attribute; each template (milestone) contains the SVG checkmark element. Id’s are created dynamically from the parent id’s and added to each SVG element. The constructed id [‘svg’ + milestone name] is then set as the id attribute for the SVG, to be later called for the new SVG object.

The script for animating is based upon this codepen, where the path is already defined, and the stroke follows the path into view. Codepen also has Snap.svg available as a quick-add for prototyping, among many other useful libraries and frameworks. The check SVG attributes are set twice, once to initialize the SVG path—the path that will eventually be drawn—and again to animate the path into view, effectively drawing the stroke from one end to another. Some changes to the original example include refactoring the attributes into variables keeps the code DRY (don’t repeat yourself), and setting a one second delay before the animation begins. Additionally, setting the animation speed to one second results in a quick, smooth drawing effect.

Finally, to trigger the animation, this project implements the jquery.appear library wrapped for meteor. Thus when the SVG appears on screen, regardless of which event was triggered (e.g. scrolled to, clicked from an external link), the checkmarks SVG will be drawn (a completed bucket list item/milestone).