This week was a big week, but it doesn’t actually look much different. I completely changed the library that runs each slide and began getting ready to change how the user interacts with the design. I am now using swiper.js to control movement to and from each new page. This library allows me to move up & down but also left and right while maintaining a manageable navigation structure. What is great about this new system is that it is very mobile friendly, and the mouse can now act like a finger to move around. Additionally, I am able to move the user through a story in all different directions instead of a traditional down motion. I spent a lot of time this week testing out how to move between pages with navigation and how to jump to specific pages. You can test jumping to specific pages by tapping the “Farmur” logo in the top left while on any other page than on home.
Another cool thing I have started learning this week is GSAP (GreenSock Animation Platform). This platform gets amazing speed when animating, and it supports many older browsers. The biggest feature that lead me to GSAP is that it uses “requestAnimationFrame.” This function is built to call animations even in mid animation, allowing for smooth transitions. This function also shuts animations down when the browser tab isn’t being looked at (saving energy), and can run around 60 fps right in your browser! I will be using this library to animate the transitions from page to page. There is a “timeline” playhead option too that I will use to create two of my interactive infographics.
I worked on getting animations working this week too. I refined the menu animation and added a subtle movement when a user hovers, this may be removed later though. Another thing I worked on was the main header animation when the section changes. Before it would fade, then snap to the right size. Now it fades then animates the width change.
Here is the current version of the site: http://goo.gl/kDPFzk