Image sequences

It is posible to put image sequences?


What type of image sequences would you like to do? I can create an example but I’d like to tailor it a bit more to your needs.

Perhaps you’d like one of:

  • an animation like sequence with flipping between images
  • a fading slideshow like sequence
  • a paged sequence that flows over the screen

I have a logo animation that I made in After Effects. I export to a png sequence (frame by frame) like a sprite. It is posible to reproduce animation from this kind of animations?


Unforunately we don’t really have an elegant way of doing this yet. There are a few things missing that would make it much easier. What you can do now is something like the below, which simply animates through the images once when you press “Go”:

<App Theme="Basic">
    <FileImageSource File="icons_200/bag.png" ux:Name="Seq0" ux:AutoBind="false"/>
    <FileImageSource File="icons_200/boy.png" ux:Name="Seq1" ux:AutoBind="false"/>
    <FileImageSource File="icons_200/clock.png" ux:Name="Seq2" ux:AutoBind="false"/>
    <FileImageSource File="icons_200/gift.png" ux:Name="Seq3" ux:AutoBind="false"/>
    <FileImageSource File="icons_200/girl.png" ux:Name="Seq4" ux:AutoBind="false"/>

        <Image Alignment="Center" ux:Name="ImageSeq"/>
        <Timeline ux:Name="SeqTime">
            <Set Target="ImageSeq.Source" Value="Seq0" Delay="0" Direction="Both"/>
            <Set Target="ImageSeq.Source" Value="Seq1" Delay="0.3" Direction="Both"/>
            <Set Target="ImageSeq.Source" Value="Seq2" Delay="0.6" Direction="Both"/>
            <Set Target="ImageSeq.Source" Value="Seq3" Delay="0.9" Direction="Both"/>
            <Set Target="ImageSeq.Source" Value="Seq4" Delay="1.2" Direction="Both"/>

        <Button Text="Go" Alignment="BottomCenter">
                <PlayTo Target="SeqTime" Progress="1"/>

I’ll put in some feature requests to make this a bit more tenable.


I’m just following up on this as I too now have a similar request. I want to display a slideshow of images fetched from a website and therefore need a dynamic way to do it.

What is the best approach to this?

Easiest way to do this is to fetch the images as urls and export an Observable with all the urls, like this for example:

		var Observable = require("FuseJS/Observable");
		var imageUrls = Observable(...);
		module.exports = {
		<Each Items="{imageUrls}">
			<Image Url="{}" />

Hi! I see that the answer of edA-qa mort-ora-y (is that a name?) is more than one year old and I wanted to know if that is still the best approach to reproduce a sequence of images for an animation made for example in After Effects.