Add Simple Line Animation and Scroll Activation to Webpage

A small bootstrap website has been built that has a scrolling front page. Scroll Magic ([login to view URL]) is used on the top menu for the front page (with an effect like [login to view URL]), and scroll magic was planned to be the activator for simple line animations as the user scrolls down (similar to [login to view URL]) A Canvas logo animation has been built and is on the page. This small animation needs to be activated by the scroll and duplicated for use elsewhere on the page. • Two areas where a logo appears and simple lines should animate once the scroll reaches the sections. Images need to "pop in" (scale quickly from nothing, slight bounce into place) at the ends of the lines. • One area where a provided image needs to be animated (line drawing should build, starting with a logo appearance, then a computer display around it, with the lines traveling to create the drawing. Once the computer display is built the line travels down and creates multiple displays. •One provided map that has a background fill area that needs to grow outward from the starting point. I am uploading a PDF that shows the page with instructions on each animated area. The example is set on the "largest" browser version of the bootstrap site. Animations will need to look correct also on the next step down, but can be hidden on tablet and mobile devices. I also need the navigation bar looked at. The appearance after the initial scroll should be more faded-in, like the viko example. Then on the subpages, the menu should stick at the top of the browser. (It currently scrolls away.) I need to have this complete within 3 days from this post.