Finish coding the hero animation #28
Conversation
✅ Deploy Preview for storybook-web ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| }, []); | ||
|
|
||
| const handleSlideChange = (newSlide: number) => { |
There was a problem hiding this comment.
I expected it to stop automatically switching between the four tabs once I clicked on one. Wdyt?
There was a problem hiding this comment.
To stop automatically? If you click it reset the timer and will start again after 3 seconds. I don't think we should make it stop forever.
There was a problem hiding this comment.
After some thoughts and discussion you were right. It will look better if we stopped the animation if the user clicks on it. I'll change that.
| import { Doc } from './doc'; | ||
| import { PanelInteractions } from './panel-interactions'; | ||
| import { Canvas } from './canvas'; | ||
| import { PanelVisualTesting } from './panel-visual-testing'; | ||
|
|
||
| export const Manager: FC<{ slide: number }> = ({ slide }) => { | ||
| return ( | ||
| <div |
There was a problem hiding this comment.
(Not sure where this feedback belongs.)
I find myself missing the animated cursor. It's pretty hard to parse the difference between each feature, as it is.
The simulated interactions for each feature in the current version also did a lot to illustrate them. E.g. navigating between different stories, changing control values. And while it's not in the current one, I think clicking on a couple different interactions steps would be similarly helpful.
There was a problem hiding this comment.
I think we should not confuse 2 things:
- A guided tour of the product
- A presentation of the tool in general
With this update I'm going after the second one so people can understand through the tab and the visual the main features. You don't need to go in details but just understand if this looks "cool" enough or with the right keywords to learn more about it.
The guided tour should be done perhaps in a video as you need people to stick to it. The version we have today is way too slow, incomplete and with no way to come back to a specific point.
There was a problem hiding this comment.
We discussed this one on Slack and in our design Jam and you're right, we could introduce some animations on each slide to make it more interactive. This will require more work but it is worth it. I'll work on it.
cdedreuille
deleted the
charles/sb-1382-home-finish-coding-the-hero-animation
branch
This is a new design to show the core features of Storybook. The UI is 100% custom and works on mobile, tablet and desktop. We were missing the visual test addon part.
I also improved the slider animation to make sure that if you click on a tab it would reset the timer.