About the project:
As promised in the previous post, here's the next update for the Actifit landingpage. The changes mainly contain a menu bar and more content.
To make the page a bit more alive, I added an animation to the numbers shown in the first section.
For the animation I use TweenMax from the Gsap animation library. After separating the data into multiple component data properties I added some computed properties and watchers to trigger the animation.
As there are more content sections now and the page got a little bit longer, I added a navbar to smothly scroll up and down.
The HTML is basically just a simple bootstrap 4 navbar with some custom styling, including an opacity transition on hover.
scrollDown method was renamed to
scrollTo and takes the id of the element to scroll to as a parameter
More Content Sections
The page now shows a daily leaderboard and all other important people that are involved in the project, like team members and ambassadors.
I added a CSS class for the avatar images that are used in all sections.