{"id":186,"date":"2013-10-24T19:50:22","date_gmt":"2013-10-24T19:50:22","guid":{"rendered":"http:\/\/farmur.com\/journal\/?p=186"},"modified":"2014-08-31T18:14:34","modified_gmt":"2014-08-31T18:14:34","slug":"responsive-web-week-8-swiper-js-animations-and-ui-feedback","status":"publish","type":"post","link":"http:\/\/farmur.com\/journal\/responsive-web-week-8-swiper-js-animations-and-ui-feedback\/","title":{"rendered":"Responsive Web \u2013 Week 8 \u2013 Swiper.js, animations, and ui feedback"},"content":{"rendered":"

This week was a big week, but it doesn’t actually look much different. \u00a0I completely changed the library that runs each slide and began getting ready to change how the user interacts with the design. \u00a0I am now using swiper.js<\/a>\u00a0to control movement to and from each new page. \u00a0This library allows me to move up & down but also left and right while maintaining a manageable navigation structure. \u00a0What 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. \u00a0Additionally, I am able to move the user through a story in all different directions instead of a traditional down motion. \u00a0I spent a lot of time this week testing out how to move between pages with navigation and how to jump to specific pages. \u00a0You can test jumping to specific pages by tapping the “Farmur” logo in the top left while on any other page than on home.<\/p>\n

Another cool thing I have started learning this week is GSAP<\/a> (GreenSock Animation Platform). \u00a0This platform gets amazing speed when animating, and it supports many older browsers. \u00a0The biggest feature that lead me to GSAP is that it uses “requestAnimationFrame.” \u00a0This function is built to call animations even in mid animation, allowing for smooth transitions. \u00a0This 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! \u00a0I will be using this library to animate the transitions from page to page. \u00a0There is a “timeline” playhead option too that I will use to create two of my interactive infographics.<\/p>\n

I worked on getting animations working this week too. \u00a0I refined the menu animation and added a subtle movement when a user hovers, this may be removed later though. \u00a0Another thing I worked on was the main header animation when the section changes. \u00a0Before it would fade, then snap to the right size. \u00a0Now it fades then animates the width change.<\/p>\n

Here is the current version of the site:\u00a0http:\/\/goo.gl\/kDPFzk<\/a><\/p>\n