Components / ScrollScene
ScrollScene
A section that holds its content on screen for a length of scrolling, for steps that change as you scroll.
Example
The component itself, running in WebAssembly, beside its code in a playground. Try it.
Code
use ravenrs::prelude::*;
fn scroll_scene() -> impl View {
// Each step fades in, holds for its share of the scene and fades out.
let step = |title: &'static str, text: &'static str, from: f32, to: f32| {
let away = Effect::hidden().then(Effect::moved(0.0, 16.0));
let card = Card::new(
VStack::new((
Text::new(title).style(TextStyle::Title),
Text::new(text).foreground(Semantic::InkMuted),
))
.spacing(8.0),
);
let link = ScrollLink::keyframes([
(from - 0.08, away),
(from + 0.02, Effect::IDENTITY),
(to - 0.02, Effect::IDENTITY),
(to + 0.08, away),
]);
ScrollLinked::new(card, link)
};
let steps = ZStack::new((
step("1. State", "A click changes a value.", -1.0, 0.33),
step("2. Layout", "Only what read it moves.", 0.33, 0.66),
step("3. Paint", "The GPU draws the frame.", 0.66, 2.0),
));
ScrollView::new((
Text::new("Scroll down: the scene holds while its steps change.").foreground(Semantic::InkMuted),
ScrollScene::new(steps).length(600.0),
Text::new("Here the scene lets go.").foreground(Semantic::InkMuted),
Canvas::new(|_, _| {}).size(10.0, 200.0),
))
.spacing(12.0)
.height(280.0)
}