1LD Tutorials & Blogs

Tutorials

Setup

settings

  1. Add the stack to your project.
  2. Drag and drop the element or stack that you want animated into the “Drop stacks here” section.
  3. In the settings panel select an animation type.

The remaining settings are optional for customization. Refer to the Settings Panel section below for a break down of what each one does.

Settings Panel

Type: Choose between 17 different animations.

Speed: Adjust the animation speed in milliseconds.

Stagger: Adjust the total possible time between the first segment animation till the last. 1000ms would mean each segment will animate randomly in between 0 and 1000 milliseconds. Decrease this value to have the segments animate closer together. Note: If the “Target Mode” is set to “Automatic – Whole” this setting controls the delay before the animation instead.

Randomize Order: By default the order in which each segment animates in is random. Disable this option to have the segments load in order from top to bottom & left to right.

Reset when not in view: Enable this option to allow the animation to repeat when the element has come back into view after leaving the browser viewport.

Target Mode:

  • Automatic – Segmented: The stack will automatically determine which elements should be segments.
  • Automatic – Whole: Removes the segments and animates the element has a whole like a more traditional in view animation.
  • Manual – Segmented: The stack will not automatically determine which elements should be segments. You can instead manually choose elements and/or list classes to let the stack know which should be segments.
    Custom Elements example: table, hr, span
    Classes example: .myClass, .another-class, .third-class

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Scroll Shift Stack

Scroll Shift Screenshot

Scroll Shift is the ultimate tool for adding seamless scroll-based animations to your web design projects. Create captivating and engaging websites by effortlessly animating elements as the user scrolls through the page. This tool can bring your designs to life with smooth transitions, eye-catching movements, and precise timing.

Create captivating visuals by linking multiple elements together to form a stacked layer effect. These elements can separate and come together to form a unified element, adding depth and dimension to your designs. The possibilities are endless as you craft intricate animations that leave a lasting impression.

Drive attention to essential content by implementing animations that trigger only when the user scrolls past a specific section. By strategically timing the animations, you can ensure that users take notice of crucial information and engage with your content effectively.

Check it out!

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software