| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25
     
Stacks Image 112087
Version 1.0.2 RW8/Classic & Stacks
Browser: Microsoft Edge / Chrome / Firefox / Safari / Opera / Brave
OS: Win / Mac / Linux / IOS / Android
Purchase includes a demonstration project file to show you how every example on this demo was created.

Animask

This Stack uses a custom curved shape to selectively reveal parts of other images and text.
Animated clipping masks on your site with RapidWeaver & Stacks, easy and fast!.

25 Animated / Static Shapes
35+ Models ready to use
Tonnes of options for endless Combinations
Enter the name for this tabbed section:

STACK INFO

Stacks Image 112680

Hype Pro

The HypePro based Stacks is the next generation of packages with original contents for RapidWeaver. All animations are designed exclusively for Stacks.

Hype ClipPath

This Stack include "Hype ClipPath" by MaxZieb; this extension offer support for vector shapes, for static and animated contents.

25 Vector Shapes

Mix all shapes for endless combinations. You can use 3 states, Initial + First (On enter Viewport) + Second (On exit Viewport).
Stacks Image 112427

Simulator in Preview

The simulator is visible only in preview. It helps you with text adjustment, the breakpoints checking and Viewport triggers.

Dashboard

A dashboard is available in Edit Mode with basic settings, the settings changes are reflected in the UI. You Can show/hide the preview for BG images.

Animations

This stack allows you to set more than one effect at the same time. Scroll and scale can be combined in different ways. Start animation automatically or in view.

Responsive

This stack is completely reactive, you can set selectively the breakpoint, From Wide screen to a smartphone.
Enter the name for this tabbed section: GENERAL SETTING

Animask Options

Template setting
 
Stacks Image 112559
Edit Mode Tools
- Hide/Show panel
- Hide/Show the BG preview
- Hide Stacks panel
Stack Background
    +     +  
Add BG to the stack.
- Une built-in images, 5 styles.
- Drag image from resources panel or disk
- Load image from URL
Stacks Image 112571
Bottom Slice: Text Colours
 
Stacks Image 112604
Internet Explorer Fallback
  FIX  
Stacks Image 112579
Shape Animation
Stacks Image 112655
Stacks Image 112586
Selectively setting for scale and rotate.
Title customization
 
Stacks Image 112596
Advanced setting
 
Stacks Image 112612
Responsive setting
     
Stacks Image 112621
Multiple Heights
Sets the height of the box selectively.
Top Shape
   
Stacks Image 112641
Background Shape
    +     +  
Add BG to the stack.
- Drag image from resources panel or disk
- Load image from URL, also a published "site image" (Stacks4 ) in your project.
Stacks Image 112633
Rear Shape
   
Stacks Image 112649
Stacks Image 112695
Compatible with RWML

DEMO Multilingual
This Stack is compatible with RWM for multilingual sites. You can use just one stack with all languages. Stack by Stacks4Stacks
Enter the name for this tabbed section: EDIT MODE

Edit Mode

Stacks Image 112501

A dashboard is available to ensure ease of use. The settings changes are reflected in the edit mode UI.
Options: Show/hide images, You can also minimize the panel to save space in edit mode.

Enter the name for this tabbed section: PREVIEW

Smart Preview

Stacks Image 112450

The simulator is visible only in preview. It helps you with text adjustment, the breakpoints checking and more.

Smart Preview for Internet Explorer


You can see how the stack works in old Internet Explorer Browser directly in preview.
Options: Shape, rounded corners and text behavior.
Stacks Image 112549
Stacks Image 112463

Preview Current Setting

Stacks Image 112467

Preview IE Fallback

Stacks Image 112288

Animation Trigger: Checking viewport triggers.

Enter the name for this tabbed section: FAQ

Smooth Animation

How to increase performances?

Choose the best combination between filters, filling method and animation.
You should try the animation in more than one browser, the stack deliver "cross platform web fonts" and the result is quite identical in all browsers.

The features requiring more resources are:
- CSS filters over the BG like Blur (or you can use 2 images)
- Further css filters applied to the stack with nested stack.

Fonts

how many font can I use?

You can use all the fonts down in your project. The stack can change the color of the text but the font and style depend on the theme or framework used. This allows a perfect integration between style and stack colors.

Load images

How to load a Stacks4 "site image" in this stack?

- Publish the project ( to upload all "site images").
- In RW copy the URL from the Thumbnail in Resources panel.
- In the Stack Paste the image path into the URL field.
Stacks Image 111907

RW: Resources panel / site image

Stacks Image 111914

Stack: external "URL image"

Compatibility

Can I use this Stack within other stacks?

Yes, you need to check that the animations are loaded on the main page; Stacks with lightbox or modal windows are not compatible.