Version 1.1.0 - RW8/Classic & Stacks - Browser Edge / Chrome / Firefox / Safari / Opera / Brave
Trendy motion design
A special column for RW Stacks
Over 80 templates for endless Combinations.
Purchase includes a demonstration project file to show you how every example on this demo was created.![Stacks Image 112391](files/stacks-image-ea4439d.jpg)
![Stacks Image 111255](files/stacks-image-e967e18.jpg)
![Stacks Image 112395](files/stacks-image-8a00577.jpg)
![Stacks Image 111269](files/stacks-image-422443c.jpg)
![Stacks Image 111261](files/stacks-image-4d14ce9.jpg)
![Stacks Image 112397](files/stacks-image-d91b953.jpg)
![Stacks Image 112393](files/stacks-image-909b0b5.jpg)
![Stacks Image 111275](files/stacks-image-e77c26e.jpg)
![Stacks Image 112317](files/stacks-image-d3b14e9.jpg)
![Stacks Image 111273](files/stacks-image-57a4914.jpg)
![Stacks Image 111289](files/stacks-image-991dff8.jpg)
![Stacks Image 111283](files/stacks-image-d2f5f6b.jpg)
![Stacks Image 111287](files/stacks-image-f3167ca.jpg)
![Stacks Image 111259](files/stacks-image-13a7d9e.jpg)
![Stacks Image 111265](files/stacks-image-ebbb5bf.jpg)
![Stacks Image 111271](files/stacks-image-a764704.jpg)
![Stacks Image 112331](files/stacks-image-9be3683.jpg)
![Stacks Image 111279](files/stacks-image-252ccaf.jpg)
![Stacks Image 111251](files/stacks-image-ab53bec.jpg)
![Stacks Image 111257](files/stacks-image-b9b1271.jpg)
![Stacks Image 111285](files/stacks-image-0225f99.jpg)
![Stacks Image 111253](files/stacks-image-aa4aabd.jpg)
![Stacks Image 112323](files/stacks-image-1fb393e.jpg)
![Stacks Image 112321](files/stacks-image-6089b0e.jpg)
![Stacks Image 112329](files/stacks-image-4ffea6c.jpg)
![Stacks Image 112327](files/stacks-image-00823c4.jpg)
![Stacks Image 112335](files/stacks-image-d9c60dc.jpg)
![Stacks Image 112337](files/stacks-image-3911892.jpg)
![Stacks Image 112325](files/stacks-image-7def025.jpg)
![Stacks Image 112333](files/stacks-image-80685ef.jpg)
![Stacks Image 112319](files/stacks-image-9c837ec.jpg)
Enter the name for this tabbed section:
STACK INFO
Perfect Retina
Based on "SVG" and "Vector shapes", powered by JavaScript, work in all modern browsers and look perfect at any devices. Yes, Retina too.
Fitting to your style
Creating original contents and interactivity for users is the main purpose of this stack. With this stack you can Highlight the content inside the column.
Animations
This stack allows you to set more than one effect for the viewport setting. Start with static shape, Start with animation "in view" and customize the second animation (on exit).
Place your Image
You can change image size proportionally or with fixed size in pixel in both layouts. You can resize the image accurately.
Responsive
This stack is completely reactive, you can set selectively the breakpoint, From Wide screen to a smartphone. You can use two columns or just one. The setting is 25/30/35/40/45/50% or 100%
Simulator in Preview
The simulator is visible only in preview. It helps you with text adjustment, the breakpoints checking and Viewport triggers.
Max-Width Height
You can set a max-width and the stack area will fit to responsive templates. The height can be fluid or fixed and you can selectively set the value with breakpoint.
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.
Enter the name for this tabbed section:
GENERAL SETTING
Template setting
![Stacks Image 112135](files/stacks-image-cbedf30.jpg)
Preview Mode Tools
- Show toolbar to test morphing animations.
Edit Mode Tools
- Hide/Show toolbar
- Hide/Show the BG preview
- Hide TopBottom Colour preview
- Show toolbar to test morphing animations.
Edit Mode Tools
- Hide/Show toolbar
- Hide/Show the BG preview
- Hide TopBottom Colour preview
Stack Background
+ +
![Stacks Image 111740](files/stacks-image-dc26752.gif)
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.
- Drag image from resources panel or disk
- Load image from URL, also a published "site image" (Stacks4 ) in your project.
![Stacks Image 112225](files/stacks-image-4e54880.jpg)
Text customization
![Stacks Image 112157](files/stacks-image-24a06c8.jpg)
![Stacks Image 112389](files/stacks-image-67214dc.jpg)
Background with customizable gradient, with linear gradient or two flat colours with variable angle.
IMG setting
+ +
![Stacks Image 112231](files/stacks-image-e8cedb3.gif)
![Stacks Image 112152](files/stacks-image-9c2d96a.jpg)
IMG Layes extras
![Stacks Image 112142](files/stacks-image-00960f6.jpg)
Background with customizable gradient, with linear gradient or two flat colours with variable angle.
Scroll Button
Show scroll button with customizable icon
![Stacks Image 112229](files/stacks-image-036eec3.jpg)
Top and Bottom Shapes
![Stacks Image 112264](files/stacks-image-4a2d4f1.jpg)
12 Vector shape with morphing animation, you can add also a border with customizable dashed line
Top Shapes
![Stacks Image 112276](files/stacks-image-a9eb7b2.gif)
Bottom Shapes
![Stacks Image 112227](files/stacks-image-c790eac.gif)
Responsive setting
![Stacks Image 111724](files/stacks-image-053e8dc.gif)
Box Width
Set the maximum width.
Multiple Heights
Fluid or Fixed setting, with breakpoints.
Set the maximum width.
Multiple Heights
Fluid or Fixed setting, with breakpoints.
Enter the name for this tabbed section:
EDIT MODE
Edit Mode Responsive UI
![Stacks Image 112072](files/stacks-image-57eed0e.gif)
Options: Show/hide images
![Stacks Image 112074](files/stacks-image-028c259.gif)
Note: You can also minimize the panel to save space in edit mode.
A dashboard is available to ensure ease of use. The settings changes are reflected in the edit mode UI.
Enter the name for this tabbed section:
PREVIEW
Smart Preview
![Stacks Image 111871](files/stacks-image-debfd15.jpg)
The simulator is visible only in preview. It helps you with text adjustment, the breakpoints checking and more.
![Stacks Image 34](files/stacks-image-f1cf0fe.gif)
Viewport animation with three options.
Apply Animation when element comes into viewport. You can select 3 states, initial ( static) , "First animation" (in view) and "Second Animation" (Exit).
You can choose different animations for each state and create morphing effects between the shapes!![Stacks Image 25](files/stacks-image-724be92.jpg)
Simulator: toolbar to activate animations.
![Stacks Image 30](files/stacks-image-62001b4.png)
Colored dots: 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)
- Background with animated GIF with complex animation style.
- Background with video or similar.
- Further css filters applied to the stack with nested stack.
External GIF
How to apply a custom gif?
Go to GIPHY, you can find cool gif for the stack.
- Go to Giphy and select your favorite GIF
- Click to "Copy Link" and select "GIF Link"
- Copy and paste this URL in the field
- Go to Giphy and select your favorite GIF
- Click to "Copy Link" and select "GIF Link"
- Copy and paste this URL in the field
![Stacks Image 112171](files/stacks-image-50e7335.jpg)
![Stacks Image 112173](files/stacks-image-7c3b929.jpg)
Giphy site
![Stacks Image 112178](files/stacks-image-9aa51a0.jpg)
Stack Panel / IMG
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](files/stacks-image-daeb83e.jpg)
RW: Resources panel / site image
![Stacks Image 111914](files/stacks-image-ab9ef35.jpg)
Stack: external "URL image"
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.
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.