[Question]

[PvKa732]

Question

Good evening, I was just trying to create a transition, and initially, the goal was to animate the elements' "Offset" moving to the left, and then, on the next page, the elements returning from the right. However, it didn't work very well; in reality, the elements went to the left, and the elements on the next page returned from the left.

I need help solving this problem; unfortunately, even the Studio AI couldn't help me with it.

Code sample

import flet as ft
import asyncio

def main(page: ft.Page):
    block1 = ft.Container(
        data='block1',
        width=100,
        height=100,
        offset=ft.Offset(x=-0),
        animate_offset=ft.Animation(duration=250),
        bgcolor='red'
    )
    block2 = ft.Container(
        data='block2',
        width=100,
        height=100,
        offset=ft.Offset(x=-0),
        animate_offset=ft.Animation(duration=250),
        bgcolor='yellow'
    )

    async def animation(item_leave, item_join): # <------- HERE
        #ft.Offset(x=-0.3)
        item_leave.offset = ft.Offset(x=-0.3) # NUMBER NEGATIVE
        item_leave.update()
        await asyncio.sleep(1)
        item_join.offset = ft.Offset(x=0.3) # NUMBER POSITIVE
        Column.controls = item_join
        item_join.offset = ft.Offset(x=0)
        item_leave.offset = ft.Offset(x=0)
        Column.update()

    def next(e):
        data = Column.controls.data
        if data == 'block1':
            page.run_task(animation, block1, block2)
        else:
            page.run_task(animation, block2, block1)
    page.add(
        ft.Container(
            expand=True,
            alignment=ft.Alignment.CENTER,
            content=ft.Column(
                expand=True,
                alignment=ft.MainAxisAlignment.CENTER,
                controls=[
                    Column := ft.Column(
                        controls=block1
                    ),
                    ft.Button('Next Block', on_click=next)
                ]
            )
        )
    )

ft.run(main)

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[TheMysteriousGhost]

The problem is the order of updates in animation(). Flet only sends changes to the client when you call update(), so in the second half:

item_join.offset = ft.Offset(x=0.3)   # set...
Column.controls = item_join
item_join.offset = ft.Offset(x=0)     # ...and immediately overwritten
Column.update()                        # only x=0 is ever sent

the x=0.3 start position never reaches the screen. Also, item_join is still sitting where it was last left (x=-0.3, from the previous round when it was the leaving block), so it animates from the left to 0. That's exactly what you're seeing.

The fix is to (1) put the incoming block at the right side without animating, (2) send that, then (3) animate it to 0:

async def animation(item_leave, item_join):
    # 1. slide the current block out to the left
    item_leave.offset = ft.Offset(x=-0.3)
    item_leave.update()
    await asyncio.sleep(0.3)

    # 2. jump the new block to the right side, no animation
    item_join.animate_offset = None
    item_join.offset = ft.Offset(x=0.3)
    Column.controls = [item_join]          # controls should be a list
    Column.update()
    await asyncio.sleep(0.05)              # let the client render that frame

    # 3. animate it in from the right
    item_join.animate_offset = ft.Animation(duration=250)
    item_join.offset = ft.Offset(x=0)
    item_join.update()

    # reset the old block for next time (it's off-screen now, so no visible jump)
    item_leave.offset = ft.Offset(x=0)

And in next(), read the current block with Column.controls[0].data, since controls is a list.

The short sleep between steps 2 and 3 matters: without it both changes can land in the same frame and you're back to no visible start position.

[PvKa732]

When "item_join" appears on the right, it loses its animation

Desktop.2026.10.15.-.15.29.11.02.mp4

[TheMysteriousGhost]

Thanks for the video! That's because in step 3 the animation is switched back on and the offset changes in the same update, so the control picks up the new animate_offset and the target position at the same moment and just jumps. Re-enable the animation as its own update before moving it:

    # 2. jump the new block to the right side, no animation
    item_join.animate_offset = None
    item_join.offset = ft.Offset(x=0.3)
    Column.controls = [item_join]
    Column.update()
    await asyncio.sleep(0.05)

    # 2b. turn the animation back on while it's still sitting on the right
    item_join.animate_offset = ft.Animation(duration=250)
    item_join.update()
    await asyncio.sleep(0.05)

    # 3. now only the offset changes, so it animates in
    item_join.offset = ft.Offset(x=0)
    item_join.update()

The rule of thumb: change either the animation settings or the animated property in a given update, never both at once.

[PvKa732]

Thx!!!

[TheMysteriousGhost]

welcomeeeeeee @PvKa732