Interactions made intuitively with physics
one of the favorite sprints i did was to explore solutions to make use of hardware capabilities with animations in order to convey our unique interaction patterns. this was crucial for success, since no one have ever created this kind of experience before. me and the one and only @colon.nyc worked on-site with the development team including savage @sebastien.windal to tweak things in code on a local app build with on-going testing and execution validation.
here's 4 of the sequences we covered:
(1) tap, pan and hold (light weight)
demonstration of cards being physically skewed on tap and affecting the rest of the grid on movement. depending on where you tap, the card will skew down towards that point, just as in our physical world.
(2) tap, pan and release with bounce (heavy weight)
this sequence follows a similar premise as the first one but with the difference that the cards are much heavier here. the resistance was clear when interacting live in our, which ultimately gave a metaphorical feeling of value and quality. on release of the swipe, the entire grid continues until coming to a bounce when hitting the edge of the upper right corner. another very important detail we added throughout the experience here was haptic feedback in moments just like this to really make it clear and responsive.
(3) grid entry and exit transition
this sequence was a slightly smaller effort than the previous two but elevates the experience just as much. the simple consideration to have this grid fade and scale in every card individually instead of all at once made a massive difference in delight.
(4) animation hints of interaction
this last sequence was one of the more challenging one. once you tap a card in the grid, it scales up and starts to play the preview of that class. the challenge here was to indicate that you could swipe in all directions to navigate between other class previews directly. we did several explorations where we discreetly hinted possible interactions with animation.
🔹 what do you think about these sequences? also if you work in ae: do you have any useful scripts?
Just found these on youtube. kylie minogue's tour started in europe and my big a*s face(sometimes half a face) is on the video behind her. thank you to the friend that made me aware this was out there. it's fun trying to take screen shots of a video.