adds HorizontalScroller #381
Conversation
|
MinamiFunakoshiTR
left a comment
MinamiFunakoshiTR
left a comment
There was a problem hiding this comment.
Hey! I left some initial questions, suggestions and so on. Let me know if you have questions about them.
|
@MinamiFunakoshiTR I have tweaked the code and made the clamp/map thing simpler. Also added a story which demonstrates how that might be useful and it comes under advance stuff. With default values all set, this is something not many will need to touch. |
MinamiFunakoshiTR
left a comment
MinamiFunakoshiTR
left a comment
There was a problem hiding this comment.
Looks great. Just one tiny tweak to the documentation. I like the new ai2svelte advanced demo. Go ahead and release this!
| /** Array of numbers desired as stops for the scroller */ | ||
| stops?: number[]; | ||
| /** Should the component handle scroll events? Set it to `false` when using inside ScrollerBase. */ | ||
| handleScroll?: boolean; |
There was a problem hiding this comment.
Does this specifically handle whether handleStops fires? If so, can we get rid of it and make it fire only if stops and/or whatever other prop you need is set?
I thought initially that handleScroll handles a custom scroll function, which isn't the case.
If we're not using ScrollerBase -- which I don't think we ever will -- maybe we don't need this option at all?
There was a problem hiding this comment.
handleScroll tells whether the progress should be handled by the component based on the scroll height or whether the progress should be dictated by the user-fed progress binding.
In case of ScrollerBase, the user needs to feed the progress value based on ScrollerBase's progress.
I'll add a lil disclaimer on the ScrollerBase integration and keep the prop (to be on safer side).
|
|
||
| ### Captions fading in/out | ||
|
|
||
| Caption boxes are exported as `htext` [tagged layers](https://reuters-graphics.github.io/ai2svelte/users/tagged-layers/) in ai2svelte. In this example, we use the `handleScroll()` function to check the position of each caption box relative to the viewport width and set its opacity to `1` (visible) or `0` (hidden) based on whether the caption box is within the `threshold` of the viewport. Set `override_text: true` in the ai2svelte export settings to allow custom HTML content in tagged text layers. |
There was a problem hiding this comment.
Let's edit this to:
In Adobe Illustrator, let override_text: true in the ai2svelte export settings to allow custom HTML content in tagged text layers.
Separately, I couldn't find any documentation on tagged text layers in the ai2svelte documentation. It would be great to have that in there at some point.
There was a problem hiding this comment.
Yeah, it's a part of ai2svelte v1.0.3 and should be updated when we release it soon.
What's in this pull request
Adds HorizonalScroller component (fixes #281)
Before submitting, please check that you've ...