Pages - child animation

How-to Discussions
1

Hi guys,

My expect make the animation when change view as the same App store:

When I pressed on View all button redirect to App category screen:

  1. The App category screen seem push and “overlap” on App screen.
  2. The App title move from App screen to Header bar app category screen.

Also I have checked this examples, the screens seems lie next to each other
https://www.fusetools.com/examples/pages-using-js

Any suggestion or guide? Super thanks!

2

Hi,

if there is a question in your post, I fail to see it. Please rephrase and try again.

Also, if you’re asking how to make a particular thing, it is necessary that you show what you have tried so far - with code.

3

Hi UIdis,

Sorry, Did you see my post?

4

Yes I did see & read you post; several times. No, I still don’t see a question. Or code that shows what you’ve tried so far.

5

@UIdis,

My code on github: https://github.com/phuongwd/fuse-hikr.

That code is tried but it seems the home page always overlap on Edit page when redirectly.

<Page ux:Class="MyPage">
    <EnteringAnimation>
      <Move X="-1" RelativeTo="ParentSize" Easing="CubicInOut" Duration="4"/>
    </EnteringAnimation>
    <ExitingAnimation>
      <Move X="1" RelativeTo="ParentSize" Easing="CubicIn" Duration="1"/>
    </ExitingAnimation>
</Page>

My question is can we do the animation like https://www.youtube.com/watch?v=oW7N6-_92Lg&feature=youtu.be ?

6

Hey hey Uldis,

I have put my code and question, is that ok for you?

7

Yes, it is possible. You will need to use Transition to achieve it. See Transition example on how to build complex transitions.

8

thank you for reply.
I have tried with Transition, but the Home screen seem overlap on Edit screen.

Please take a look my screenshot @ https://github.com/phuongwd/fuse-hikr/issues/1

update: this issue resolved :slight_smile:

Home page:

<Transition Direction="ToActive">
  <Move X="-1" RelativeTo="ParentSize" Duration="0.4" Easing="CubicInOut"/>
</Transition>
<Transition Direction="ToInactive">
  <Move X="-0.5" RelativeTo="ParentSize" Duration="0.6" Easing="CubicInOut"/>
</Transition>

Edit page:

<Transition Direction="ToActive">
    <Move X="1" RelativeTo="ParentSize" Duration="0.5" Easing="CubicInOut"/>
</Transition>
<Transition Direction="ToInactive">
    <Move X="1" RelativeTo="ParentSize" Duration="0.6" Easing="CubicInOut"/>
</Transition>
9

Hi UIdis,

One thing, about the animation for Title “Apps”.
It move from App screen into Header bar of Category screen.

I really confused for that the title are on 2pages.
But we can see the title scale and move into Header bar, really cool :slight_smile:

I dont know how do that. Can you give me any suggestion or idea?

Thank you in advance!

10

Yes, generally you would use LayoutMaster to move nodes between different parents.

Take a look at Details view animation example to find out how that works.

11

super thanks!

btw:
Can not we change the title this thread?