1# Implicit Shared Element Transition (geometryTransition)
2
3**geometryTransition** is used to create a smooth, seamless transition between views. By specifying the frame and position of the in and out components through **geometryTransition**, you can create a spatial linkage between the transition effects (such as opacity and scale) defined through the **transition** mechanism. In this way, you can guide the visual focus from the previous view (out component) to the new view (in component).
4
5> **NOTE**
6>
7> This feature is supported since API version 7 and effective since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
8>
9> For the settings to take effect, [geometryTransition](ts-transition-animation-geometrytransition.md) must be used together with [animateTo](ts-explicit-animation.md). The animation duration and curve follow the settings in [animateTo](ts-explicit-animation.md). [animation](ts-animatorproperty.md) is not supported.
10
11## geometryTransition
12
13geometryTransition(id: string)
14
15Implements an implicit shared element transition.
16
17**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19**Atomic service API**: This API can be used in atomic services since API version 11.
20
21**Parameters**
22
23| Name | Type                | Mandatory| Description                                                    |
24| ------- | ------------------------ | ---- | ------------------------------------------------------------ |
25| id      | string                   | Yes  | ID used to set up a binding relationship. Setting **id** to an empty string clears the binding relationship. The value can be changed to re-establish the binding relationship. One ID can be bound to only two components, which function as in and out components.|
26
27## geometryTransition<sup>11+</sup>
28
29geometryTransition(id: string, options?: GeometryTransitionOptions)
30
31Implements an implicit shared element transition.
32
33**Atomic service API**: This API can be used in atomic services since API version 11.
34
35**System capability**: SystemCapability.ArkUI.ArkUI.Full
36
37**Parameters**
38
39| Name | Type                | Mandatory| Description                                                    |
40| ------- | ------------------------ | ---- | ------------------------------------------------------------ |
41| id      | string                   | Yes  | ID used to set up a binding relationship. Setting **id** to an empty string clears the binding relationship. The value can be changed to re-establish the binding relationship. One ID can be bound to only two components, which function as in and out components.|
42| options | [GeometryTransitionOptions](#geometrytransitionoptions11) | No  | Settings of the implicit shared element transition.                                  |
43
44## GeometryTransitionOptions<sup>11+</sup>
45
46**System capability**: SystemCapability.ArkUI.ArkUI.Full
47
48**Atomic service API**: This API can be used in atomic services since API version 11.
49
50**Parameters**
51
52| Name| Type| Mandatory| Description                                                    |
53| ------ | -------- | ---- | ------------------------------------------------------------ |
54| follow | boolean  | No  | Whether to apply the animation to components that are always in the component tree. It is effective only in the **if** syntax.<br>Default value: **false**|
55
56## Example
57
58```ts
59// xxx.ets
60@Entry
61@Component
62struct Index {
63  @State isShow: boolean = false
64
65  build() {
66    Stack({ alignContent: Alignment.Center }) {
67      if (this.isShow) {
68        Image($r('app.media.pic'))
69          .autoResize(false)
70          .clip(true)
71          .width(300)
72          .height(400)
73          .offset({ y: 100 })
74          .geometryTransition("picture", { follow: false })
75          .transition(TransitionEffect.OPACITY)
76      } else {
77        // geometryTransition is bound to a container. Therefore, a relative layout must be configured for the child components of the container.
78        // The multiple levels of containers here are used to demonstrate passing of relative layout constraints.
79        Column() {
80          Column() {
81            Image($r('app.media.icon'))
82              .width('100%').height('100%')
83          }.width('100%').height('100%')
84        }
85        .width(80)
86        .height(80)
87        // geometryTransition synchronizes rounded corner settings, but only for the bound component, which is the container in this example.
88        // In other words, rounded corner settings of the container are synchronized, and those of the child components are not.
89        .borderRadius(20)
90        .clip(true)
91        .geometryTransition("picture")
92        // transition ensures that the component is not destructed immediately when it exits. You can customize the transition effect.
93        .transition(TransitionEffect.OPACITY)
94      }
95    }
96    .onClick(() => {
97      animateTo({ duration: 1000 }, () => {
98        this.isShow = !this.isShow
99      })
100    })
101  }
102}
103```
104
105![geometrytransition](figures/geometrytransition.gif)
106