My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Assemble Your RapidWeaver Project

With DK Stacks having disappeared from the RW scene we are now one animation stack poorer. I used DK's Mover on a number of sites, so until just a few days ago, I was wondering what I should replace it with. 1LD came up with the solution for me. Assemble!

Assemble offers up to 17 different animations which can be staggered and offset. Assemble also allows you to set the Target mode. The result is an almost endless array of settings. But perhaps the most interesting fact is that it's possible to manually choose elements and/or list classes to let the stack know which partial segments should be animated.

The whole process is relatively complicated to describe and a picture says more than a thousand words, so why don't you take a look at the Assemble demo page to see what Assemble can do. I promise that you won't be disappointed.

Stack Settings
[Animation] Type – 17 options
Speed – ms
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
Offset – Adjust the distance from the top of the browser window the animation initializes. 100% will cause the animation to start as soon as it is inside the browser window. 30% will cause the animation to start only when the element is in the top half of the window
Target Mode – Automatic Segmented, Automatic Whole, Manual Segmented

If you're into animated page elements, Assemble offers a few innovative options which, when used sparingly, can make your page all the more interesting.

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Quantum Edge: Rapidweaver Templates

After Duck Soup, the world around Marten Claridge remained silent, except that every Wednesday, he was explaining live to an elite group, how to take Maximum Advantage of the Maximum Design pack. For the last month or so, these video conferences have targeted Quantum Edge (amongst other themes) and said elite group has been aah-ing and ooh-ing and rubbing their hands expectantly.

The wait is over. Duck Soup has a sibling and if you thought Maximum Design was cool, you'll find Quantum Edge has been chilled a couple of degrees more.
Quantum Edge began life as what was probably the single most complicated RapidWeaver project ever produced. In the meantime, Marten has taken sensible steps to split the project into more bite-sized modules. Five of them.

As with the Max Design pack, Quantum Edge is predominantly based on Sections modules; standalone, multi-purpose, full-width content containers that can be quickly deployed to make an instant impact on both your page and your clients. There are eighteen pages of these modules, but you don't have to purchase all eighteen of them; instead you can opt to acquire just five, or ten of them and, as a seasoned BWD user, work out for yourself how the remaining modules were created…

Quantum Edge – RapidWeaver Central

This time round, Marten's new package doesn't simply present Sections modules; there is a module with complete pages, one with cards, one that devotes itself to footers and one specifically aimed at the iPhone.
You can, of course, secure the complete bundle at a reduced price. But be warned: it will take you a whole day just to peruse your purchase and a month, or two, to get to grips with (i.e. understand) what Marten has put together! Quantum Edge takes advantage of the very latest BWD stacks to present subtle animations and 3D effects never before seen in RapidWeaver.

If you're looking to impress a new client, or just want to WOW the visitors to your new home page, Quantum Edge has everything you need to be able to do so easily.
Copy and Paste one of Marten's modules, replace the content with your own and the wow-effect is guaranteed!

Whichever module(s) you decide to procure, when you open your download, you'll discover that you have a Foundation, a Foundry and a Universal version for both RW7 and RW8. You'll also discover a download link to all images used within your project and – if SVGs were used in the project – you'll find all the SVGs too!

Be sure to watch Marten's tuition video on the demo page. Then, if you then still have queries, feel free to join his regular Wednesday meetings and ask any questions you may have…

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Floating Notice for RapidWeaver

I recently saw a post on the forums "sign up to our newsletter and receive a free stack". I'm a glutton for punishment, so that's exactly what I did! And I'm sure many, many more did to, because – Hey! It's free!

Dual Shard Designs. We have no idea who they are as their website gives us no information whatsoever (it's almost empty). Judging by their logo, they could be based in Mettmann in the not-so-idyllic North Rhine-Westphalia; we may never know…
… what we do know is that they are going to "provide the community with tools to build charming and attractive websites" and that their launch is being promoted with a free stack.

Floating Notice is a neat little notice that floats up and down over your important message, so that no-one will miss it! Strangely enough, I spotted a couple of messages on the forums "doesn't work!!". A very useful message, because it informs the developer exactly what is going on.

I've had no such 'luck' (I love it when stacks don't work, or when I can break them), I tested the stack with Foundation and RW8 and it works perfectly for me. I even tried a couple of different stack combinations – just to make sure.

So how does Floating Notice work? Quite simply drop Floating Notice into a Stacks page and drag the stack that you wish to highlight into it. At the bottom of Floating Notice, you'll notice a text container — this is where you place your message.

Now you just need to adjust the animation and such things as padding and you're all set. You might need to add a margin to encompass the movement, but that's all.
Unless, of course, you're not happy with a simple text message. Should this be the case, you can go wild and begin adding stacks to Floating Notice. The stacks will then jump, or float, up and down to catch a visitor's attention – depending on the animation speed you chose.
Floating Notice – Dual Shard
Stack settings
Colour – Font, Background
Align – Left, Centre, Right
Border Radius
Show Shadow
Animation Speed
Animation Distance
Top Position
Use Stacks Content

With a floating (or bouncing) message above your Special Offer, Book Now, or Learn More, no-one is going to miss your CTA.
And all Floating Notice is going to cost you is a subscription to the news letter, where you'll learn more about the site launch and about even more free stacks.

What are you waiting for? There's sure to be an 'Unsubscribe' button!

Please note that DISQUS operates the forum below.
When you sign in to comment, RWNinja will provide your email, first and last names to DISQUS. That information, along with your comments, will be governed by DISQUS’ privacy policy. By commenting, you are accepting the DISQUS terms of service.
Comments

Scroll Mate 2 for RapidWeaver

In April 2015, BWD released Scroll Mate. Now, twelve months after the total rewrite was initiated, Andrew has finally released Scroll Mate 2. This post is a few days late; I didn't have time to test the beta version and it's taken me a while to delve into the settings. Sorry about that.

Scroll Mate 2 will animate any stack that you drop into it, even those that are notorious for not functioning when they are not visible on page load. The animation takes place within the distance that the screen content is scrolled. See below.

Let's take a look at what Scroll Mate 2 can do…

Animation Trigger defines when the animation begins. The options: Top Edge – Animates the stack from when the top of the container enters the viewport to when it exits. Bottom Edge - From when the bottom of the container enters the viewport to when it exits. In view – From when the top of the container enters the viewport to when the bottom exits.
Start and End Percentage define the scroll distance during which the animation takes place. The speed of the animation is controlled by the start and end percentages. The shorter the range, the faster the animation; the higher the range, the slower the animation.
Direction defines the start and end state of the animation. Animate From begins with Scroll Mate's transition settings and transitions to the stack settings. Animate To does the reverse.
The Crop button limits the effect to the vertical scrolling boundaries of the document. Leaving the boundaries uncropped allows elements to remain unaffected by enter effects when they are near the top of the page or by exit effects near the bottom.
Once Only sets the animation to deactivate once it has scrolled up off the page. Elements that are unable to scroll off the page – a footer, for instance – will continue to animate when the page is scrolled.
The Contain button restricts the animation to the boundaries of the Scroll Mate container. This can be unchecked in order to allow animations to proceed across the full width and height of the browser. However, many 'traditional' RW themes limit content to a maximum width. ScrollMate cannot break out of these boundaries. With Freeform themes such as Foundation, FSR, Pure and BootSnap the full width of the browser can be utilised for your animations.
Position allows Scroll Mate to float within its parent container.

Scroll Mate 2 – Big White Duck

Inertia sets the 'mass' of the animated object.
Start Delay sets when the inertia easing begins.
Easing applies easing to the inertia effect.

Opacity sets the translucency of the stack at the beginning of the transition.
Move X – A positive value entered into Move X, will move the content from right to left, whilst a negative value will reverse that movement.
Move Y – A positive value for Move Y will animate the content upwards and a negative value downwards as it enters the transition area. Combining the X and Y axes will cause a diagonal transition to take place.
Units may be set in each of the above cases to determine the amount of movement.
Scale (X, Y Z) sets the size of the stack at the beginning of the transition, allowing stacks to zoom into the page by either getting larger or smaller. Setting the Z scale in combination with X and/or Y translations, causes a transition up or down the Z axis – the '3rd dimension'. It allows your content to get larger and smaller to simulate the 3rd dimension in a 2d space.
Rotate X will rotate Scroll Mate's contents along the horizontal axis during the animation.
Rotate Y will rotate along the vertical axis. Entering values into both boxes will spin the contents along both axis simultaneously but may cause severe motion sickness. A value of 720º will cause your content to rotate twice.
Rotate Z will rotate the content along the Z axis.
Origin sets the origin of the rotation.
Use 3D (add perspective) allows use of the Z axis effects causing your content to appear as if it gets closer or further away.
Touch Devices – animations may be deactivated for touch devices either for each instance of Scroll Mate, or page wide.

The really big changes, when compared to the original Scroll Mate, are new basic positioning controls and child stacks for advanced positioning, backgrounds which allow scroll controlled fade ins of backgrounds etc. (See BWD's demo file). The other really big new feature is the ability to use units other than px. It is now possible to use % or even browser units (vw vh) to move stacks responsively and consistently.
The inertia is really like a transition time so that the speed of movement can now be independent of the % start and % stop settings. In fact, in many of the BWD demo's it is used in "trigger mode" where the start and the stop %'s are the same (or 1% apart) and therefore just used to fire the animation whose speed is completely dependent on the intertia time.

Scroll triggered animations are not supported by some older browsers which shall remain nameless. The stack degrades gracefully, allowing your page to display normally with all content being shown as static content without the animations.

Conclusion: Forget all those other animation stacks which limit themselves to five or ten different transitions! Scroll Mate was great; Scroll Mate 2 is brilliant! Scroll Mate 2 can live alongside the original version of Scroll Mate in your library, these are two different stacks. Oh, and your animations may be nested!
Animate responsibly and don't forget to make a donation, Andrew will appreciate it!

Comments

SVG Stack For RapidWeaver

I recently read a plaidoyer on one of the forums that argued that warehoused images are unnecessary – most RapidWeavers don't take advantage of the function. Well here's proof that the statement just can't be true. The new SVG stack from Doobox is targeted specifically at warehoused SVGs, now giving us a choice of three stacks that can display an SVG.

The name SVG stack is slightly misleading. The stack will also load warehoused jpg, png and gif files and can display an alternate image on hover. The latter function is interesting especially as it allows you to mix formats.

SVG – Doobox


Stack settings
SVG Image – Set Link
Alternate Text – Default 'Missing Image'
On Click – Do Nothing, Link To URL
On Hover – Do nothing, Show Alternate Image
Max Width – Desk, Tablet, Mobile
Position – Left, Centre, Right – Desk, Tablet, Mobile
Breakpoints – Standard, Custom

The fact that SVG has an option to display an alternate image on hover is a neat trick, which many will find useful.

Comments

Show more posts

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

Subscribe to Ninja News
or ask a question

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing.
By clicking 'Submit', you are giving your consent to having rjh-webdesign collect your name and email.
These details are used exclusively for the newsletter and will not be passed on to third parties!

As soon as I've added you to the mailing list, you'll receive a mail asking you to confirm your subscription.

If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry to hear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

  • Stacks Image 158
  • Stacks Image 161
  • Stacks Image 164
  • Stacks Image 167
  • Stacks Image 170
  • Stacks Image 173

Looking for Inspiration?

Looking for Inspiration for a new site, or need a CTA
really quickly?

The Latest & Greatest

Kalendar for RapidWeaver
Websites that display calendars have two core functions: They show upcoming events and they ...
Filter Grid for RapidWeaver
There are a couple of stacks available that will filter RapidWeaver content; some more, some less ...
Intrinsic: CSS Grids for RapidWeaver
The 'experts' currently agree unanimously that CSS Grids are the future of web design. In a couple ...
  • Do you have a question regarding RapidWeaver?

  • Would you like help with your new project?

  • Would you like us to build your new RapidWeaver website?

Contact Information

rjh logo

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.

Legal

This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me.

Subscribe to the Ninja Newsletter

You've reached the bottom of the page, thanks for reading.

If you enjoyed what you read, you can subscribe to the Ninja Newsletter and receive a review summary once a month.

Thanks for your subscription

We shall send you a summary of the Ninja News reviews once a month.
We do not send out any other mails and we shall not, under any circumstances, share your email address with third parties.