https://axelkanakan.com/work daily 0.75 2015-08-25 https://axelkanakan.com/work-1 daily 1.0 2020-07-24 https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c7f0a33fa0d605292cb60c5/1551829593587/illustration.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c7f03e24e17b669bea0c019/1551827994018/diagramPink.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c7f01e99140b751b70b3ca0/1551827458658/diagramBlue.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c7f0e4d53450a3cacd1d5ee/1551830699165/info1.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c7f1a56f9619a7c4037fa31/1551833695620/historyofhadoop-01.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c7e3253e5e5f08439d468c9/1551774488522/Schools.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c7f1c854e17b642f18ac09b/1551834256757/ui-04.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c7f0819e5e5f0d39b46786c/1551829054480/diagramPurple.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c7f193253450a3cacd26f98/1551833398826/graph-01.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5bf33671f950b75f39ef244d/1542667357676/x001.gif Home - x001 A simple swipe effect. Using onDrag and onDragEnd to test different interactions when you swipe past a certain point. Click on the image to play with the prototype yourself. https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c37ef2d03ce64f5ec0ce334/1547170454003/shopX008.gif Home - x008 In this prototype I wanted to apply a behavior to all elements and determine how easy it would be to recreate seamless interactions across a project. It’s tempting to do a lot of these interaction simply as animations but with code, you only have to create the animation once, allowing for a lot of time saved in it’s application. click on the image to download the prototype. https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5bf3393488251ba663255e01/1542667428658/musicPlayer.gif Home - x004 A simple Music Player transition. Planning on fleshing out this design and building a fully functionally music prototype in the feature. Click on the image to play with the prototype yourself. https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5bf3380e032be432ef81ad4c/1542667407621/tinderSwipe.gif Home - x003 Tinder swipe feature. The key to bringing this prototype to life is the Utils.modulate feature in framer.js, which allows you to link two different components together. Click on the image to play with the prototype yourself. https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c37f3c56d2a738812f886d4/1547170974288/mediumx009.gif Home - x009 Tab navigation is a pretty simple thing in most prototyping tools. In this example I made use of the visible prop in the code overrides to link the different pages to the corresponding tab. The reason for this approach is for more versatility. The available link tool is limited and once you learn a bit more javascript its tough not trying to build your own interaction. click on the image to download the prototype https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c37f7e0c2241b2d0b59be3d/1547171857837/appleMusicx010.gif Home - x010 Recreated the apple music interaction. I’ve always been impressed with this interaction but recreating it in framer x is a bit trickier then framer.js. What was a huge help is conditionals allowing for certain events to only happen in specific cases. Click on the image to download the prototype. https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5bf336f3aa4a999343f59e20/1542667380164/x002.gif Home - x002 A study in scrolling events and switching states as you scroll up and down. Click on the image to play with the prototype yourself. https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c37e93d8a922dd17382656a/1547168506194/uberEatsx006.gif Home - x006 Recreated the UberEats interaction. When you scroll down the menu a horizontal head updates based on the current section of the menu. Transitioning from framer to FramerX makes this process a little more involved. Click on the image to download the prototype https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5bf33b9d8a922d69869ad697/1542667487700/IntroScreen.gif Home - x005 Iphone X intro animation. Recreating this animation was a bit trick because of how the timing of the animation differ slightly. Utils.delay played a key role in making this seamless. Click on the image to play with the prototype yourself. https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c37eb4a2b6a287d79809d40/1547169041064/pageCompx007.gif Home - x007 Playing around with the page component. Being able to effect change based on specific events is what sets Framer apart as a prototyping tool. In this case a simple color change is enough but the application is limitless. Click on the image to download the prototype https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5ca284d3f9619a0cc6a37df7/1554154716613/My+Network-squarespace.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5ca284ad971a181a185a8215/1554154706278/Profile+Page-SquareSpace.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5ca28369e4966b843f73c34c/1554154590000/Homepage-Squarespace.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5ca284ce971a181a185a8358/1554154709728/Messages-Squarespace.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5ca3c9ae9b747a78d58f7d0d/1554237879820/UI+Guidelines.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d8e7a4e706def6fb4b65a59/1569618514635/conclusion.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d40dce256b52b2175feb2/5d8d40dd3358103990c34a57/1569538273696/Browser-One.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d40dce256b52b2175feb2/5d8d40f09619a36664ec6a05/1569538293653/Browser-Two.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d40dce256b52b2175feb2/5d8d40f97faafd4f4f80435e/1569538299726/Browser-Three.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d40dce256b52b2175feb2/5d8d4105fa6e9d330fc0ed0a/1569538312393/Browser-Four.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d40dce256b52b2175feb2/5d8d41389c13042c9cdcd92a/1569538363458/Browser-Five.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d40dce256b52b2175feb2/5d8d4144b186dc15e9587804/1569538375318/Browser-Six.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d40dce256b52b2175feb2/5d8d415b887b0f07a66fc985/1569538397584/Browser-Seven.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d40dce256b52b2175feb2/5d8d41659c13042c9cdcdd1c/1569538411502/Browser-Eight.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d40dce256b52b2175feb2/5d8d417abb54cb62893ed3a4/1569538429258/Browser-Nine.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d40dce256b52b2175feb2/5d8d41883e6a73239ce3df40/1569538442894/Browser-Ten.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d4cec64b3ab36839c1e4f/5d8d4cecfa6e9d330fc1fe91/1569541358898/Mobile-One.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d4cec64b3ab36839c1e4f/5d8d4cf7e256b52b217717ac/1569542060455/Mobile-Two.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d4cec64b3ab36839c1e4f/5d8d4cff3358103990c45c90/1569542060453/Mobile-Three.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d4cec64b3ab36839c1e4f/5d8d4d09887b0f07a670d5c5/1569542060484/Mobile-Four.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d4cec64b3ab36839c1e4f/5d8d4d129619a36664ed7993/1569542060519/Mobile-Five.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d4cec64b3ab36839c1e4f/5d8d4d1a9c13042c9cdde74b/1569542060527/Mobile-Six.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d4cec64b3ab36839c1e4f/5d8d4d25b186dc15e9598132/1569542060517/Mobile-Seven.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d4cec64b3ab36839c1e4f/5d8d4d3ae256b52b21771d64/1569542060520/Mobile-Eight.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d4cec64b3ab36839c1e4f/5d8d4d4ebb54cb62893fe695/1569542060545/Mobile-Nine.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d4cec64b3ab36839c1e4f/5d8d4d5a9c13042c9cddee12/1569542060720/Mobile-Ten.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8d4cec64b3ab36839c1e4f/5d8d4d6e7faafd4f4f816010/1569542060730/Mobile-Eleven.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8aa03848c64d0823da8d75/5d8da1e1dd33c63c0071652f/1569563108285/Ipad-One.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8aa03848c64d0823da8d75/5d8da27daeb1640fc35fd228/1569563265926/Ipad-Two.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8aa03848c64d0823da8d75/5d8da287212c494914a9e9d0/1569563275364/Ipad-Three.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8aa03848c64d0823da8d75/5d8da294e9652a24c7a2f082/1569563289459/Ipad-Four.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8aa03848c64d0823da8d75/5d8da29cc44a35091782e322/1569563295440/Ipad-Five.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8aa03848c64d0823da8d75/5d8da2a459c029599d11ad92/1569563305807/Ipad-Six.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8aa03848c64d0823da8d75/5d8da2ace9652a24c7a2f277/1569563319663/Ipad-Seven.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8aa03848c64d0823da8d75/5d8da2c434e4170605f03093/1569563335433/Ipad-Eight.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8aa03848c64d0823da8d75/5d8da2da602fa11ff9215fe4/1569563357491/Ipad-Nine.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8aa03848c64d0823da8d75/5d8da43659c029599d11c2e0/1569563706726/Ipad-Ten.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8aa03848c64d0823da8d75/5d8da443aeb1640fc35fe979/1569563718542/Ipad-Eleven.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d8aa03848c64d0823da8d75/5d8da46419c4f60bba8e6dac/1569563758159/Ipad-Twelve.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d8953d5fd6f631477190c18/1569280986991/preview_brex_dribbble.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9aabbc7740a50001cd5480/1553640801341/pageCompx007.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9acdbde5e5f02eae8ad3ed/1553649266680/mediumx009.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9a9dfd9140b729a76bab28/1553637246441/x001.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9aa7d14e17b64e4e12d515/1553639644186/IntroScreen.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9aa560652deabc84375e38/1553638926308/tinderSwipe.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9aaa13971a1828391cb357/1553640161217/uberEatsx006.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9aa419971a185a85ce6b13/1553638549181/x002.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9aa6ebc83025ee1c8dfe4b/1553639206712/musicPlayer.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9acad7ee6eb0437547c6a0/1553648633740/shopX008.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9ace978165f5ad0c3575b5/1553649371852/appleMusicx010.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c996817ee6eb00b8753faac/1553557530582/notification.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c99686beb393175322b7a02/1553557618694/clickTab.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9961978165f55df83e5ca1/1553555883055/toolBarAnimation.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9967d77198900001b1af9b/1553557470228/dropDown.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9963cfeb393175322b3dd3/1553556439463/bright.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9963de53450ad95e398322/1553556453806/fastFotwardani.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c996391f4e1fceb23d2ed24/1553556374060/Power-Toggle.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c9968916eeb200001be752b/1553557653425/clickFlip.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d12d4ee49d2360001cfe15d/5d12d4ee8d912700019bb53b/1561515274304/sketches.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d12d4ee49d2360001cfe15d/5d12d5659afaad00010d3f5a/1561515381059/sketches-2.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d12d36af54b570001f10205/1561514878356/styleguide.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d0fa3e2807a8800016cc997/1561306084108/research.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d0e79c217e3300001dac573/1561229776785/Yembo-Banner.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d128336e07ce10001dd36d7/1561494328697/search.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d0fa563a66301000181c7a4/1561306471918/visualDesigns.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d115d49252d70000173704c/5d126001b0c0f90001a1ac51/1561485317969/mid-fi-1.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d115d49252d70000173704c/5d1260016287c40001708c04/1561485317003/mid-fi-2.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d115d49252d70000173704c/5d1260036287c40001708c65/1561485318296/mid-fi-3.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d115d49252d70000173704c/5d1260040024d600015d3d7f/1561485318218/mid-fi-4.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d115d49252d70000173704c/5d1260052a75c60001754113/1561485319437/mid-fi-5.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d111d46325d240001306364/5d111ed0be3d1d0001f180d4/1561403090596/wireframe-1.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d111d46325d240001306364/5d111ed02636f60001f1aacb/1561403090579/wireframe-2.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d111d46325d240001306364/5d111ed159895d0001222bf8/1561403091224/wireframe-3.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d111d46325d240001306364/5d111ed1d44eb80001bf7696/1561403091082/wireframe-4.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d111d46325d240001306364/5d111fe1d44eb80001bf9248/1561403362439/wireframe-5.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d1279de92b77b0001fc296d/5d127ae674a02d0001967788/1561492201838/hi-fi-1.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d1279de92b77b0001fc296d/5d127ae674a02d0001967789/1561492202738/hi-fi-2.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d1279de92b77b0001fc296d/5d127ae88c54cd0001219c0a/1561492203498/hi-fi-3.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d1279de92b77b0001fc296d/5d127ae88d2b5b0001f3ac12/1561492204295/hi-fi-4.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d1279de92b77b0001fc296d/5d127aea47583700015dcd52/1561492206926/hi-fi-5.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/5d1279de92b77b0001fc296d/5d127aea6724b4000112a1f2/1561492206295/hi-fi-6.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d12815679fae50001fe9e8c/1561493852570/DELIVERY.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d03e3fb1580e400016c1f4e/1560648553043/counter.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d03e4b61abad300017641bf/1560648569588/clock.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c81b37c7817f71a4908e2d7/1552004050683/burgerBuilder.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d040641546f150001b3b55c/1560648594664/pokemon-hero-2.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d320eae7b2f6d00018d52c2/1563561680895/chatme.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d0599e873542100013acd30/1560648174802/mini-react.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d0bf6c052f30f000186022e/1561065274085/mat-ui.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d03f941fd5d7700014a001a/1560648608530/gohan-final.gif Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5f1a0a79777f301764c444dc/1595542147685/ Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5f1a47f170dd1121a823d8da/1595557876737/frame+copy.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5bd37e73a4222f4fae8222c0/1540587126319/linkedIn+Cover.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5bd37e8ce4966ba2864675bd/1540587160494/selectedWorks.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5bd37ed0e5e5f0cc091dde09/1540587218548/Zeger.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5bd38b5053450a5669215dde/1540590418198/micro-Interaction.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5bf4d14921c67cd9702cbf3e/1542771021643/x100.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5c7f217b15fcc0964aa095e8/1551835519748/2uCover.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5ca3cd9ceb39317ca18c963d/1554238877494/linkedIn+Cover.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d12e370a4f6110001931ae0/1561518964904/yembo.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d12e3f51f6a490001935c3d/1561519097589/reactPlayground.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d12e7c8b789b7000167f646/1561520074106/micro-Interaction.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d8eadc585c3b643b777ecc2/1569631686329/x100.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5d8eae7134901e60510d8ea0/1569631861359/brex-cover.png Home https://static1.squarespace.com/static/5a581cbb1f318dd974eae9fc/t/5f1a0b1b5aa7a00c84bc9875/1595526734008/ Home https://axelkanakan.com/about daily 0.75 2020-08-24