Logo
Logo

Animations

Breakdance includes advanced, visually captivating animations that are easy to set up without complex coding. From sticky animations to entrance and scrolling effects, Breakdance empowers designers to create dynamic, interactive content that enhances user engagement and keeps visitors on the page longer.

Animation Types

There are three animation types available within Breakdance.

Scrolling Animation

Scrolling Animations animate elements in response to user scrolling, creating a sense of movement and interactivity as users navigate through a webpage. Scrolling animations allow continuous animation based on the scroll position, creating a more immersive and engaging experience.

Entrance Animation

Entrance Animations allow elements to animate into view when they appear within the viewport during scrolling. These animations are designed to add a dynamic and engaging visual effect as users interact with a webpage. The animations can help draw attention to specific elements, creating a more interactive and visually appealing user experience.

Sticky Animation

The Sticky Animation Controls apply sticky positioning to elements, which keeps an element fixed within the viewport until a specified scroll position or other condition is met, after which it scrolls out of view. This effect helps create interactive, visually appealing sections where content stays “stuck” for some time as users scroll through a page.

Animations and Accessibility

Breakdance Animations are Accessible-friendly. This means that Scrolling and Entrance Animations will not work if a computer has been set to prefers-reduced-motion. Please check our Accessibility documentation for further information.

Advanced Animation Features

There are several hooks and APIs available to modify Breakdance Animations further.

Reusable Dependencies

Breakdance has several hooks allowing you to add or change the dependencies used through the Dependencies API. These APIs can allow you to change GSAP versions, for example, or change where the files are hosted.

Replaying Animations

Breakdance includes an Animations API that allows you to replay animations as desired.

Scrolling Animation Controls:

  • Enabled: Choose whether or not to toggle Scrolling animations.
  • Horizontal Position: Change the Horizontal position of the element while scrolling.
  • Vertical Position: Determine the Vertical position of an element when scrolling.
  • Opacity: Set the Opacity anywhere from 0 to 1.
  • Blur:  Alter the Blur from 0 to 100.
  • Rotation: Change the Rotation of the element from 0 to 360.
  • Scale: Modify the Scale and size from 0 to 5.
  • Advanced: 
    • Ease: Changes the timing of the animation’s tweens, impacting the animation’s feel and personality.
    • Scrub: Softens the link between the animation and the scrollbar so that it takes some time for the animation to catch up.
    • Transform Origin: Set the origin for an element’s transformation (Reference).
    • Relative To: Decide whether the Sticky position is based on the Parent element, the Viewport, or a Custom selector.
    • Custom Selector: Define the Custom selector used for relative positioning. Only available if ‘Relative To’ is set to ‘Custom’. 
    • Disable At: Determine the breakpoint at which the Sticky animation stops working.
    • Debug: View the animation settings within Breakdance.

Animation Settings

Each Animation has 4 settings available to it.

    • Start: Determine the Start value of the Animation.
    • Middle: Define the Middle value of the Animation. Useful for differing speeds from start to finish.
    • End:  Set the End value of the Animation.
    • Trigger: Define the time the element needs to be scrolled before animating.

Entrance Animation Controls:

  • Animation Type: Choose the Animation that will be used for the entrance.
  • Duration: Set the total time that the Animation will occur.
  • Delay: Add a delay to the Animation before it begins.
  • Advanced:
    • Distance: Set the distance that the animation will travel.
    • Offset: Add an Offest to the animation.
    • Animate only once: Set the animation only to occur once instead of every time a user scrolls up or down the page.
    • Ease: Changes the timing of the animation’s tweens, impacting the animation’s feel and personality.
    • Disable At: Determine the breakpoint at which the Sticky animation stops working.

Sticky Controls:

  • Position: Select whether the element should be sticky at the page’s Top, Center, or Bottom.
  • Offset: Determines the distance between the top of the viewport and the element when it is in its sticky state.
  • Relative To: Decide whether the Sticky position is based on the Parent element, the Viewport, or a Custom selector.
  • Custom Selector: Define the Custom selector used for relative positioning. Only available if ‘Relative To’ is set to ‘Custom’. 
  • Disable At: Determine the breakpoint at which the Sticky animation stops working.