Code Challenge Sequence Submission

[benstrumeyer]

Description

• Animation class handles turning the sequence of images into an animation
• Event listeners are initialized in app.js, Used to pass the scroll position and set the animation container dimensions used in the animation class
• Uses anime.js to handle keyframe sequencing and updating the DOM accordingly through a callback function
• Star is actually a unicode character, couldn't find asset

Bugs/Improvements

• Edge case: On page refresh, if the user is scrolled past the bottom of the 400vh animation container, bottom gets set to a negative value. TODO: Get reference to bottom of animation container relative to the top of the page, taking into account scroll position
• Should throttle setAnimationContainerDimensions() since it's being called onResize

Fixes # (issue)

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Please test in all major browsers.

• Chrome Latest
• Edge Latest
• Firefox Latest
• Safari Latest
• Mobile Safari
• Mobile Chrome

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

Challenge Checklist

• The animation plays through frames 1 to 100
• The page layout matches the design at 1440px, 768px, and 375px
• Clicking the button takes the user to the cards section
• Extra Credit: The hero section remains pinned for 4 full scrolls
• Extra Credit: The animation is synced to the scroll position

[benstrumeyer]

@hookerz/reviews

This was really fun, thanks for taking a look in advance

[benstrumeyer]