> ## Documentation Index > Fetch the complete documentation index at: https://docs.zonely.gen.tr/llms.txt > Use this file to discover all available pages before exploring further. # Animations > Edit logo movements, card entries, hover effects and skeleton installer. Page Creative **Animations** open the part. For logo movements **Logo Animations**for card and loading behavior **Content Animations** Use the editor. ## Adjust logo height and movement **Logo Animation** switch open and closes movement. **Logo Height (px)** field **32–300** Set the size of the logo on the screen by entering a value between. To change the visual file [Logo](https://docs.zonely.gen.tr/en/guides/page-builder/logo.md) Go to the section. [![Logo animation, Layer Insert, Layer settings, Reduce movement](https://mintcdn.com/zonely-a8cd49e7/VcGJjK7LclDv4BqR/images/panel/page-builder-guide-20261025/11-logo-animasyon-en.png?fit=max\&auto=format\&n=VcGJjK7LclDv4BqR\&q=85\&s=cc7fd1b6ed5b68ee76c4869b8a8e3dd6)](https://docs.zonely.gen.tr/images/panel/page-builder-guide-20261025/11-logo-animasyon-en.png) > [card] 1. Logo animation > > Open the movement of the logo and adjust the height separately. > [card] 2. Layer Insert > > You can use a different motion and working mode in each layer. > [card] 3. Layer settings > > Select type, time, delay and mode. Change ranking with up/Down. > [card] 4. Reduce movement > > Use reduced motion adjustment for a quieter look. **Add Layer** Add a movement with the button. Your layer **Genre**, **Duration**, **Delay** and **Home** fill in the fields. Time and delay are milliseconds; **1000 ms, 1 second**. There are movements such as jumping, swinging, pulse, inhalation, slipping, zooming, flipping, blurred entrance and sparkle in the list of types. Start with one layer first **Replay Preview** Press the button; then add the second layer if necessary. **Introduction** for initial movements. **Consecutive** layers are played in order. **Infinite Loop**used for layers that will repeat after the beginning. List **Exit** mode does not be triggered by itself in the current logo preview. Home **Up / Down** change the buttons sequence; **Delete** alone removes that layer. **Movement Azalt** You can stop the movement in preview with the option. The reduced mobility choice of the device is also considered. ## Prepare the input animation of cards **Content Animations** window **Animations** open the key. Detailed areas appear. [![Trigger, Time and ranking, Visibility threshold, Motion curve](https://mintcdn.com/zonely-a8cd49e7/6szifUMHSc9sb8vV/images/panel/page-builder-guide-20261025/12-icerik-animasyon-en.png?fit=max\&auto=format\&n=6szifUMHSc9sb8vV\&q=85\&s=f3f32ec25804b5ed8d01f7951ab50caf)](https://docs.zonely.gen.tr/images/panel/page-builder-guide-20261025/12-icerik-animasyon-en.png) > [card] 1. Trigger > > The move page starts to load or enter the card visible area. > [card] 2. Time and sorting > > The length of movement is; wait between rows delay cards. > [card] 3. Visibility threshold > > Value from 0–1 determines the rate of cards that should appear. > [card] 4. Motion curve > > Select one of the ready curves or edit easing value. **Genre** Select the area of Soluk, Up Kay, Right, Close or Translate. **Trigger**, movement **When the Page Loads** or card **When you enter the field of view** determines what to start. * **Direction Filter:** It is the working condition when scrolling down or sliding up in any direction. * **Just Once:** The movement limits with one play. * **Hide when exiting screen:** Determines the behavior of the card out of the visible area. Check again with your playlist. * **Duration:** The length of the movement is; **100–2000 ms** set between. * **Inline Delay:** For the time between the background of cards; **0–500 ms** range. * **Tags:** How much card should be seen; **0–1** A rate is entered. **0,15**means about 15 percent. * **Start From:** Start Distance **0–400 px** settings between. **timing** Select Soft, Standard, Dynamic, Spring, Fast or Linear curve from section. Edit the corresponding value if you have a special motion curve. **Live View** View the result in the field. ## Select the effect of coming on cards **About Bride** option opens hover effect. **Remove**, **Shadow** or **Slope** Select one of the types. **Hover Close** Check the option together. [![Onward effect, Tilt behaviour, Scale and duration](https://mintcdn.com/zonely-a8cd49e7/6szifUMHSc9sb8vV/images/panel/page-builder-guide-20261025/13-hover-efektleri-en.png?fit=max\&auto=format\&n=6szifUMHSc9sb8vV\&q=85\&s=c87d4f0719373166ab3df0952d79ca85)](https://docs.zonely.gen.tr/images/panel/page-builder-guide-20261025/13-hover-efektleri-en.png) > [card] 1. The effect of coming on > > Select one of the Remove, Shadow or Tilt view. > [card] 2. Tilt behaviour > > Use cursor Tracking or Fixed Angle mode. > [card] 3. Scale and time > > Set the growth and movement time of the card separately. If you are using the slope **Following the Cursor** to be bound by the mouse, **Fixed Angle** Keep it on a certain slope with it. **Tilt Power** density of slope, **Z Return** return, **Cards Break Zikzak** adjusts the alternate usage of the rotations. **Magnification** scale of card, **Duration** determines the length of the pass. Try the connection of the card and the buttons as it can not be performed on the mouse on the phones. ## Set scaffold loader **Scaffold Loader**The content is the place holders that appear when preparing. **In Pictures** and **Texts** Select which content is used with their selections. [![Scaffold loader, Image and text, Shimmer view](https://mintcdn.com/zonely-a8cd49e7/6szifUMHSc9sb8vV/images/panel/page-builder-guide-20261025/14-iskelet-yukleyici-en.png?fit=max\&auto=format\&n=6szifUMHSc9sb8vV\&q=85\&s=8690256288e257ed54ae666d01eab490)](https://docs.zonely.gen.tr/images/panel/page-builder-guide-20261025/14-iskelet-yukleyici-en.png) > [card] 1. Scaffold loader > > Open and close the ground grips shown when the content is prepared. > [card] 2. Visual and text > > Select which contents of ground holders are used. > [card] 3. Shimmer view > > Set the corner radius and the duration of the spark. **Glow Effect** open and close the movement. **Corner Radius** shape of the space holder, **Glaze Time** adjusts the speed of movement. Check and close the window and **Save All** Press the button. Check the first opening, down/slot scroll and card interactions on the user page. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.