Modules
      Back to home
      1. Kalungi's Help Center
      2. Atlas Documentation
      3. Modules

      Animations on Scroll Overview

      Learn and Preview All the Animation Settings Included with Atlas Pro

      Atlas Pro users have access multiple on-scroll animation configurations that can be set locally within a module. With 25+ effects and multiple low-level parameters, the possibilities are endless!

       

      Enabled Animation on Scroll Overview img1 This setting serves the purpose of an on/off switch. It’s unchecked by default, so make sure to check it to enable your animations.
      Effect Animation on Scroll Overview img2

      This setting allows you to choose the type of animation. Atlas includes over 25 animation types for you to explore, so make sure to check out this live demo with examples.
      Delay Animation on Scroll Overview img3 This field allows you to hold the animation trigger for a desired number of milliseconds. This is especially useful when creating cascading effects that involve multiple modules.
      Duration Animation on Scroll Overview img4 The duration is the time between the animation’s start and its end. Tweaking this value can make your animations go from fast and “jumpy” to slow and “eased”.
      Easing Animation on Scroll Overview img5

      The easing type of curve defines the differences in speed during your animation’s transition. These easing curves can set a tone not just for your animations but for the feel of your page as well. Atlas includes over 20 easing curve types, so make sure to check out this live demo on easing functions.
      Mirror Animation on Scroll Overview img6  
      Once Animation on Scroll Overview img7 This checkbox allows you to prevent the animation from triggering every time a user scrolls over the module. If checked, the animation will only start after the first scroll.
      Anchor Placement Animation on Scroll Overview img8

      The anchor placement sets the interception point between the module and the viewport, determining the animation’s trigger point. It’s set to Top-bottom by default, meaning that the animation will trigger when the top of the modules overlaps with the bottom of the user’s viewport. Atlas includes multiple anchor placement options for you to explore, so make sure to check out this live demo with examples.
      Offset Animation on Scroll Overview img9 The offset setting adds an extra space gap above the anchor point that triggers your animation. It allows you to start animations at a “later” scroll point.

       

      Check out this detailed tutorial and live demo on the Animation on Scroll library.

       

       

      Get premium Atlas support from the team that built it   Need an extra hand? Get web dev support from the team that built Atlas, including… Atlas implementation Ongoing site improvements and optimizations Custom module development Web page development Managing multiple Atlas websites Our team of developers are experts in all things HubSpot web development, and flexible pricing tiers mean you get exactly the level of support you need in the areas you need it.