# Callback delay doesn't work in DeactivatingAnimation

**URL:** <https://forums.fusetools.com/t/callback-delay-doesnt-work-in-deactivatinganimation/1995>\
**Category:** How-to Discussions\
**Created:** [August 21, 2017, 4:41pm UTC](https://forums.fusetools.com/t/callback-delay-doesnt-work-in-deactivatinganimation/1995 "2017-08-21T16:41:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Baris\_Bilgic](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/baris_bilgic/32/46_2.png) [@Baris\_Bilgic](https://forums.fusetools.com/u/Baris_Bilgic)\
**Post date:** [August 21, 2017, 4:41pm UTC](https://forums.fusetools.com/t/callback-delay-doesnt-work-in-deactivatinganimation/1995/1 "2017-08-21T16:41:59Z")

</div>

I was expecting that the `foo` method below is called 5 seconds after the animation is deactivated.

```auto
<DeactivatingAnimation>
      <Callback Handler="{foo}" Delay="5"/> 
</DeactivatingAnimation>

```

However, it triggers the method immediately. What could be wrong here?

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [August 21, 2017, 5:05pm UTC](https://forums.fusetools.com/t/callback-delay-doesnt-work-in-deactivatinganimation/1995/2 "2017-08-21T17:05:06Z")

</div>

There’s nothing wrong except the expectations.

A `DeactivatingAnimation` provides a continuous progress for when a page is being deactivated - for the whole _length_ of deactivation. So you should use this trigger on a _continuous_ modifier, something like a `Change`. In this case, `Delay` makes very little sense.

```auto
<App>
    <PageControl>
        <Panel ux:Name="redPage" Color="#f00">
            <DeactivatingAnimation>
                <Change redPage.Opacity="0" />
            </DeactivatingAnimation>
        </Panel>
        <Panel ux:Name="bluePage" Color="#00f">
            <DeactivatingAnimation>
                <Change bluePage.Opacity="0" />
            </DeactivatingAnimation>
        </Panel>
    </PageControl>
</App>

```

If you need to _pulse_ a `Callback`, you should use a pulse trigger, for example `Deactivated` - this one gets pulsed when the page has become inactive, and supports adding a `Delay` on nested triggers.

```auto
<App>
    <JavaScript>
    function redDeactivated() {
        console.log("red deactivated");
    }
    function blueDeactivated() {
        console.log("blue deactivated");
    }
    module.exports = {
        redDeactivated: redDeactivated,
        blueDeactivated: blueDeactivated
    };
    </JavaScript>
    <PageControl>
        <Panel ux:Name="redPage" Color="#f00">
            <DeactivatingAnimation>
                <Change redPage.Opacity="0" />
            </DeactivatingAnimation>
            <Deactivated>
                <Callback Handler="{redDeactivated}" Delay="3" />
            </Deactivated>
        </Panel>
        <Panel ux:Name="bluePage" Color="#00f">
            <DeactivatingAnimation>
                <Change bluePage.Opacity="0" />
            </DeactivatingAnimation>
            <Deactivated>
                <Callback Handler="{blueDeactivated}" Delay="3" />
            </Deactivated>
        </Panel>
    </PageControl>
</App>

```

Hope this helps!

---

<div class="post-metadata">

**Author:** ![Baris\_Bilgic](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/baris_bilgic/32/46_2.png) [@Baris\_Bilgic](https://forums.fusetools.com/u/Baris_Bilgic)\
**Post date:** [August 22, 2017, 9:07am UTC](https://forums.fusetools.com/t/callback-delay-doesnt-work-in-deactivatinganimation/1995/3 "2017-08-22T09:07:58Z")

</div>

This is a great answer and `<Deactivated>` is exactly what I’m looking for. Thanks!

I should have read this but I’m still a bit confused about animations, triggers, callbacks but it’s getting better with these clear answers.