Motion resolves immediately

I'm using ripple to display a banner when a new track plays, but the spring motion resolves to px(400) immediately.

Solution:

Here is the Frame ```tsx import React, { InstanceProps, ReactNode } from "@rbxts/react"; import { Colors } from "shared/util/colors"; import { Rounded } from "./Rounded";...

Jump to solution

10 Replies

longuintOP•4d ago

import { useMusic } from "../composables/use-music";
import { useMotion } from "@rbxts/pretty-react-hooks";
import { usePx } from "../composables/use-px";
import React, { useEffect } from "@rbxts/react";
import { Frame } from "./derived";
import { springs } from "../composables/springs";

export function MusicBanner() {
    const music = useMusic();
    const [width, widthMotor] = useMotion(0);
    const px = usePx();

    useEffect(() => {
        if (music.isPlaying) {
            widthMotor.set(0);
            widthMotor.spring(px(400), springs.responsive);
        } else {
            widthMotor.spring(0, springs.responsive);
        }
    }, [music.currentTrack, music.isPlaying]);

    print(width.getValue());

    return (
        <Frame
            size={UDim2.fromOffset(width.getValue(), px(75))}
            anchorPoint={new Vector2(0.5, 0.5)}
            position={new UDim2(0.5, 0, 0, 75)}
        />
    );
}

import { useMusic } from "../composables/use-music";
import { useMotion } from "@rbxts/pretty-react-hooks";
import { usePx } from "../composables/use-px";
import React, { useEffect } from "@rbxts/react";
import { Frame } from "./derived";
import { springs } from "../composables/springs";

export function MusicBanner() {
    const music = useMusic();
    const [width, widthMotor] = useMotion(0);
    const px = usePx();

    useEffect(() => {
        if (music.isPlaying) {
            widthMotor.set(0);
            widthMotor.spring(px(400), springs.responsive);
        } else {
            widthMotor.spring(0, springs.responsive);
        }
    }, [music.currentTrack, music.isPlaying]);

    print(width.getValue());

    return (
        <Frame
            size={UDim2.fromOffset(width.getValue(), px(75))}
            anchorPoint={new Vector2(0.5, 0.5)}
            position={new UDim2(0.5, 0, 0, 75)}
        />
    );
}

wAD•4d ago

size={mapBinding(width, (T) => UDim2.fromOffset(T, px(75))}

longuintOP•4d ago

Should I add .getValue() to the end of that? It's complaining I cannot assign Binding<UDim2> to UDim2

Solution

longuint•4d ago

Here is the Frame

import React, { InstanceProps, ReactNode } from "@rbxts/react";
import { Colors } from "shared/util/colors";
import { Rounded } from "./Rounded";

export interface FrameProps {
    backgroundTransparency?: number;
    backgroundColor?: Color3;
    size: UDim2;
    position?: UDim2;
    anchorPoint?: Vector2;
    children?: ReactNode | ReactNode[];
    Native?: Partial<InstanceProps<Frame>>;
    keyName?: string | number;
    cornerRadius?: number;
}

export function Frame(props: FrameProps) {
    return (
        <frame
            BackgroundColor3={props.backgroundColor !== undefined ? props.backgroundColor : Colors.BLACK}
            BackgroundTransparency={props.backgroundTransparency ?? 0}
            Size={props.size}
            Position={props.position}
            AnchorPoint={props.anchorPoint}
            key={props.keyName ? props.keyName : `frame`}
            {...props.Native}
        >
            <Rounded px={props.cornerRadius ?? 8} />
            {props.children}
        </frame>
    );
}

import React, { InstanceProps, ReactNode } from "@rbxts/react";
import { Colors } from "shared/util/colors";
import { Rounded } from "./Rounded";

export interface FrameProps {
    backgroundTransparency?: number;
    backgroundColor?: Color3;
    size: UDim2;
    position?: UDim2;
    anchorPoint?: Vector2;
    children?: ReactNode | ReactNode[];
    Native?: Partial<InstanceProps<Frame>>;
    keyName?: string | number;
    cornerRadius?: number;
}

export function Frame(props: FrameProps) {
    return (
        <frame
            BackgroundColor3={props.backgroundColor !== undefined ? props.backgroundColor : Colors.BLACK}
            BackgroundTransparency={props.backgroundTransparency ?? 0}
            Size={props.size}
            Position={props.position}
            AnchorPoint={props.anchorPoint}
            key={props.keyName ? props.keyName : `frame`}
            {...props.Native}
        >
            <Rounded px={props.cornerRadius ?? 8} />
            {props.children}
        </frame>
    );
}

wAD•4d ago

where does it say that

longuintOP•4d ago

nvm, I added Binding<UDim2> to the size type and that fixed it

wAD•4d ago

you can use BindingOrValue type exported from prh

longuintOP•4d ago

interesting utility type, thanks for letting me know that exists.

PepeElToro41•3d ago

why not width.map((t) =>

wAD•3d ago

basically the same

Gaming

Programming

Motion resolves immediately

Did you find this page helpful?