1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16

Stacks Image 113882

Version: 1.0.2 - RW8/Classic & Stacks
Browser: Chrome, Safari, Opera, Brave, Firefox, Edge.

Stacks Image 114193
Elegantly shows what's under the hood
A collection of smooth vector animations applied to images. UnCover can personalize your site and create delightful experiences for your visitors, you can play with demos in the demo project to get inspired.
60+ DEMOS
 Drop Images Here 

Stacks Image 114109
Stacks Image 113957
Stacks Image 113991
Stacks Image 113967
Stacks Image 113951
Stacks Image 113995
Stacks Image 113949
Stacks Image 113987
Stacks Image 113993
Stacks Image 113963
Enter the name for this tabbed section:

STACK INFO

 Drop Images Here 

Stacks Image 114142
Stacks Image 114144
Stacks Image 114146
Stacks Image 114148
Stacks Image 114150
Stacks Image 114152
Stacks Image 114154
Stacks Image 114156
Stacks Image 114158
Stacks Image 114160
Stacks Image 114162
Stacks Image 114164
Stacks Image 114166
Stacks Image 114168
Stacks Image 114170
Stacks Image 114172

Key Features

• Set Max Width and Height (also variable).
• Set alignment in Desktop and Mobile.
• Covers with custom color and blending mode.
• Covers with rounded corners and border Style.
• Covers, Title and Icon with blending mode.
• Titles with custom font and style.
• Further AW icon or small image like your logo.
• Add link to stack with background animation

Stacks Image 114132

Customizable Vector animations

Responsive

This stack is completely reactive, you can set selectively the breakpoint, From Wide screen to a smartphone.

Hype Pro

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

Simulator in Preview

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

Hype BlendModes

This Stack include "Hype BlendModes" by MaxZieb; this extension offer support for blending images.
Enter the name for this tabbed section: GENERAL SETTING

UnCover Options

Template setting
 
Stacks Image 114023
Stacks Image 114025
Edit Mode Tools
- Hide/Show panel
- Hide/Show the BG preview
- Hide Stack Preview
Responsive setting
     
Stacks Image 114035
Stacks Image 114037
Stacks Image 114039
Blending Filters
& =
Stacks Image 114047
Title: Colours & Style
 
Stacks Image 114056
Stacks Image 114058
AW Icon & Small Image
&
Stacks Image 114066
Stacks Image 114068
Background Image
    +     +  
Add BG to the stack.
- Drag image from resources panel or disk
- Load image from URL
Stacks Image 114079
Background Overlay
+
Stacks Image 114087
Vector Cover
 
Stacks Image 114095
Add Link to Stack
Stacks Image 114103
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.

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.

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.

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"

Google Fonts

How to apply Google Fonts to title?

The external fonts you may upload by google, must be always tested and we cannot guarantee the correct rendering of the fonts in all browsers; it depending on the font that you use.
Stacks Image 113922

Google site

Stacks Image 113917

Stack Panel

- Set "Custom font" in the Stack
- Go to https://fonts.google.com/
- Select yoru favorite font
- Copy and paste the font name
Note: The External font is not visible in the dashboard in "Edit mode". Only built-in fonts are visible in "Edit mode".

Google Fonts Variations

How to edit theGoogle Fonts Weight?

In Google Font you're able to choose the thickness of the web-font.
Some fonts don't support all weight variations, so you have to check in GoogleFont Site which is the right set for each font.

  IMPORTANT NOTE: With the wrong weight the character is NOT displayed correctly. This is not a bug. Many fonts in Google have no variations but only the default value. Check carefully and set the right value.

Font weight setting in Google Fonts
Compare two different thickness settings

Stacks Image 113906

Font with some specific styles + Italic
This Font works with THREE styles only

Stacks Image 113901

Font with just one style + Italic
This Font works with ONE style only

  WebFonts and Browser Compatibility

All the fonts embedded in the stack, including special characters and punctuation marks, have been tested. however some styles may be rendered differently by each browser.
  Safe fonts and Browser Compatibility

Even if compatible some "Safe Fonts" are rendered differently in some browsers. Some "Safe Fonts" are not available by default on iOS and Android devices and they will be substituted by browsers on these devices as it is a licensed font from Microsoft.

UNCOVER STACK
RW8/Classic & Stacks4/5
Changelog


Cart