Help Center > Elementor Editor > Widgets > Manage your widgets > Scrolling Effects – Scale

Scrolling Effects – Scale

Last Update: January 14, 2024

This post has been translated using machine translation, which may result in minor inaccuracies or differences in wording compared to the original. We apologize for any errors or ambiguities. Please feel free to contact us if we can clarify anything for you.

Set any element to scale (grow or shrink) as the user scrolls up or down the page.

scale

Advanced or Style > Background

Motion Effects

  1. Scrolling Effects: Slide to ON
  2. Scale: Click pencil edit icon
    Direction: Choose from Scale Up, Scale Down, Scale Down Up, or Scale Up Down
    Speed: Set the scaling speed from 0 to 10
    Viewport: Determine when to begin the effect, based on viewport height (the visible size of the device screen). For example, if the viewport value is set between 50 – 100, the effect starts only after you scroll half the viewport height.
  3. X Anchor Point: Choose the horizontal axis from which the element will scale, selecting from Left, Center, or Right
  4. Y Anchor Point: Choose the vertical axis from which the element will scale, selecting from Top, Center, or Bottom
  5. Apply Effects On: Select to apply the motion effects on Desktop, Tablet, and/or Mobile devices.
  6. Effects Relative To: Choose from Default, Viewport, or Entire Page

Note: The two settings, X & Y Anchor Points, determine the axis around which the element scales. If you set orientation left-top, the scaling will happen from the left-top point of the element. If you set orientation center-center, the scaling will happen from its center.

On this page

Share this article

Hosted with