GIFs in Marquee

Developers
1

Forgive me if this has already been asked. I have text mixed with a gif in a Marquee, but the gif doesn’t animate.

gif_url = "https://i1.wp.com/blackandyellowotakugamers.com/wp-content/uploads/2018/05/akira-gif-13.gif"
res = http.get(gif_url)
img = res.body()

return render.Root(
        render.Marquee(
            offset_start = 32,
            offset_end = 32,
            height = 32,
            scroll_direction = "vertical",
            width = 64,
            child = render.Image(src = img, width = 64)
        )
    )

It just shows 1 frame of the gif. Is that the intended behaviour?

2

As far as I know, marquees are just for animating text.

Take a look at the animation documentation if you want to animate the whole scene. You can apply a Translate transform to do that.

1 Like
3

Tried to see if the gif would animate but same results with:

return render.Root(
        child = render.Animation(
            children = [render.Image(src = img, width = 64)],
        )
)

and

return render.Root(
        child = render.Animation(
            children=[
                render.Row(
                    expanded = True,
                    children = [render.Image(src = img, width = 64)],
                )
            ],
        )
   )

Just a single frame. Am I doing it right? Do I have to somehow split the gif and animate frame by frame?

4

You have to specify the animation keyframes.

Try this!

def main(config):
    res = http.get("https://i1.wp.com/blackandyellowotakugamers.com/wp-content/uploads/2018/05/akira-gif-13.gif")
    gif = res.body()

    return render.Root(
        animation.Transformation(
            duration = 100,
            child = render.Image(width = 64, src = gif),
            keyframes = [
                animation.Keyframe(
                    percentage = 0,
                    transforms = [animation.Translate(0, 0)],
                    curve = "ease_in_out",
                ),
                animation.Keyframe(
                    percentage = 1,
                    transforms = [animation.Translate(0, -16)],
                    curve = "ease_in_out",
                ),
            ]
        ),
    )
1 Like
5

Perfect! That’ll get me started. Thanks for the guidance.