Scroll Timeline issue

🌵 Needle Engine
21

okay okay got it, but could you tell me how i could subscribe to browser scroll event?

by user 263967078346653697

22

i dont even know where to search for it

by user 263967078346653697

23
24

but this is html?

by user 263967078346653697

25

It’s javascript

26

i mean this looks like it also requires html page to scroll

by user 263967078346653697

27

got this without changing any scripts
Screenshot_14.png

by user 263967078346653697

28

says timelinedirectordoesnt exist

by user 263967078346653697

29

hmm

by user 263967078346653697

30

its here

by user 263967078346653697

31

on the same object just like the sample

by user 263967078346653697

32

It says that the value being set to time is not a number (it happens for example is something is divided by 0)

33

okay so it has to be that html window is not found

by user 263967078346653697

34

i looked over the scollytelling sample once more

by user 263967078346653697

35

i dont see how it has the html scroll thingy

by user 263967078346653697

36 
import { Behaviour, PlayableDirector, serializeable } from "@needle-tools/engine";
import { Mathf } from "@needle-tools/engine/src/engine/engine_math";

// Documentation → https://docs.needle.tools/scripting

export class ScrollTimeline extends Behaviour {

    @serializeable(PlayableDirector)
    timeline?: PlayableDirector;

    @serializeable()
    startOffset: number;

    @serializeable()
    lerpSpeed: number = 2.5;

    private targetTime: number = 0;

    start() {
        window.addEventListener("wheel", (evt: WheelEvent) => this.updateTime(evt.deltaY));
        let lastTouchPosition = -1;
        window.addEventListener("touchmove", (evt: TouchEvent) => {
            if (lastTouchPosition === -1) {
                lastTouchPosition = evt.touches[0].clientY;
            }
            const delta = evt.touches[0].clientY - lastTouchPosition;
            if (delta < 10) {
                this.updateTime(-delta);
            }
            lastTouchPosition = evt.touches[0].clientY;
        });
    }

    private updateTime(delta) {
        if (!this.timeline) return;
        this.targetTime += delta * 0.01;
        this.targetTime = Mathf.clamp(this.targetTime, 0, this.timeline.duration);
    }

    onBeforeRender(): void {
        if (!this.timeline) return;
        this.timeline.pause();
        this.timeline.time = Mathf.lerp(this.timeline.time, this.targetTime, this.lerpSpeed * this.context.time.deltaTime);
        this.timeline.evaluate();
    }
}

alternative version with mousewheel and touch scroll

37

hahaaaa

by user 263967078346653697

38

it works! If i were to make it a separate script

by user 263967078346653697

39

would i need to take care of the npm thing?

by user 263967078346653697

40

I just pushed it to the samples repo too. Made some minor tweaks but its essentially the same