Responsive Timeline isn't the first timeline stack for RapidWeaver, I've reviewed two in the past, but it is the first timeline stack that will allow you to scroll your timeline horizontally. The result: Your Italian assassinations still take up a heck of a lot of space, but there is still room on your page for a lot more content!
And the timeline can be made to look very attractive – there's an example on 1LD's homepage that displays a full screen image with the first date visible. Then, when you scroll vertically, further dates fade in. This is the default appearance for Responsive Timeline – the first date appears on the left of the screen, accompanied by a button at the top of the screen, inviting you to scroll right. When you do so, the next dates are revealed with a fade-up animation. With the timeline set to horizontal, Responsive Timeline automatically reverts to vertical below a defined breakpoint.
… if you have Responsive Timeline set to vertical as you scroll down the page, a single date will appear, then the next and the next, as you scroll further
So about that button. It says Scroll and has an arrow pointing to the right. As horizontal scrolling is not yet the expected behaviour on a website, I clicked the button and nothing happened. Currently nothing will happen and that is the only complaint that I have with Responsive Timeline – it has a scroll button that doesn't.
Use Animations – When deactivated the timeline is static
Orientation – Horizontal (default), Vertical
Item Max Width
Line Thickness – Joining line in px
Content BG [colour]
Content Font – 14 font options
Triangle size – connector in px
Shadow – deactivated by default
Icon Size – Desktop, Mobile
Icon Text Size – Desktop, Mobile
Icon Margin – Desktop, Mobile
Shadow – deactivated by default
Text Size – Desktop, Mobile
The Responsive Timeline Item Child has options to set the Date, the Icon Font and the Icon, plus an option to add an icon image just in case you can't find the weapon of choice for your assassinations…
If you need a timeline on your website, you now have a choice of three. Two of them are the more traditional, vertical timeline and 1LD's interesting space saver – Responsive Timeline – I know which one I would choose for longer publications.
Since Stacks 3, this kind of 'suite' has become obsolete. Instead we have either stacks Childs, or an option within the settings panel to change a stack's function.
And that is exactly what the S4S AnimateIt update brings you – a single stack with all the options that the previous suite presented, a much cleaner interface and code that has been optimised.
Whilst I was able to view a pre-release version of the new AnimateIt stack, I hadn't realised that, in the meantime, it has been released. So I apologise for the delay:
AnimateIt is a stack that, as the name implies, animates any content placed within it, or can animate any stack with a specific ID. There are six different triggers for an animation – On Pageload, When In View, etc. fourteen different effect types and nine different animation types – which, when combined, result in over 50 (fifty) different animation possibilities.
The animation speed may be set and the animation may also be set to Loop Infinitely.
I've had AnimateIt in my Stacks' library for some years now and it's good to see that it has been updated for Stacks 3.
I've just been able to take a look at at the pre-release version of what Marten will be delivering and I'm flabbergasted!
'Duck Soup' isn't simply a single project page, it is a whole set of projects with over 150 different amazing modules that you can paste into your own projects to achieve instant design perfection. The modules are built exclusively with BWD stacks and should work with virtually any theme.
I hear that Duck Soup will be released very soon (perhaps even before Thanksgiving) and I personally can't wait!
ShakeIt is one of those attention-grabbers that I personally am not fond of. That, however, is my own humble opinion and should not influence you if you need to Shake, Rumble, Vibrate or Pulse any element on your page
ShakeIt does exactly what the name implies — it causes a stack to wobble about and beg for attention. It can shake, or pulse a stack, or a set of stacks (using CSS ids) either constantly, or upon interaction with the mouse, i.e. when hovered. There are ten different animations to choose from.
The animation is endless – so I personally would confine the effect to display only when hovered. But again, that's just personal taste.
If you intend to animate an image stack with ShakeIt, some of the animations will cause the image corners to be cropped when moving. To avoid this, make sure that your image has enough padding.
Shake – Stacks (default), Custom CSS Selector(s)
Shake Trigger – Shake Constantly (default), Shake Constantly, Pause on Hover, Shake on Hover
Shake Effect – Ten options – ranging from subtle (Little) to totally Crazy!
Don't let yourself be influenced by my personal taste. If ShakeIt is the stack that you need, to grab your visitor's attention, go for it!
If you are prone to epileptic seizures, you might prefer to avoid the demo page!
Quick Menu is one of those stacks that makes you wonder why no one came up with this solution before now. A menu stack that appears, or disappears when and where needed and can trigger whatever you want it to trigger.
Here's an example: I have a single page website and would like a context menu to appear for each section. With Quick Menu I can add a menu of my choice to either side of the page with markers before and after each section and with each section a new menu will fade into view.
A product section, for instance, with a couple of rows of images could display a menu to call up product information for each item.
And when you scroll to the next section, the menu fades out, ready for the next products…
A group of social buttons when a contact form is visible on the page, or that contains a trigger for the contact form's lightbox alongside the social buttons.
Quick Menu can also be set to be permanently in view, or to appear when a marker on the page is scrolled to and then remain visible until the bottom of the page is reached. Quick Menu can also contain hidden menu buttons.
In this case, there is a 'View All' button which triggers a Quick Menu lightbox that displays a complete list of menu items.
Quick Menu is highly configurable, so that each button can have its own colour and it goes without saying that each button can have its own icon.
Quick Menu consists of three stacks – the main stack that supplies the menu's global settings, a Menu Item stack that allows configuration of each separate item and a Marker stack.
The first thing that struck me about the settings panel, is that there are no unnecessary settings included – so no background colour, no margins, or padding. The second thing that I observed is that Weavium, like a number of other developers that produce great stacks, don't make use of tool tips; so you'll either need to experiment, or read the manual.
Show/Hide – Display – Always, On Scroll To, Between Markers
Responsive – Hide Menu (for the standard breakpoints)
Horizontal Position – Left, Right
Vertical Position – Top, Centre, Bottom
Top Offset – px
Padding – Top Offset for the lightbox menu
Z-Index – Default setting 1 quadrillion
Background – Lightbox background colour
Hide View All Button – deactivates the lightbox
Default BG (colour)
Default Content (colour)
Item Radius (interesting to note that whilst the menu radius is altered top and bottom, the lightbox radius only top right)
Text Weight – Normal, Bold
Font – Selection of 15 web fonts
Items > Open
Max Width – px
Item Padding – Vertical, Horizontal
Item Radius – sets the radius of all four item corners
Quick Menu Item Stack
Hide (shows when opened)
Item Action – Link (default), Scroll to Top, Scroll to Bottom, Scroll to Marker, Java Function
Icon Font – Font Awesome, Ionic, Material, Custom
Quick Menu Marker Stack
Quick Menu is an interesting new stack that is well worth a look at. Check out the demo page to see its possibilities.
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
Yes, I would like to receive your monthly newsletter.
No thanks, I’m good for now. I have a different issue.
[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.
[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.
Thanks again for contacting us. Your request was successfully submitted.
Looking for Inspiration?
Looking for Inspiration for a new site, or need a CTA
The Latest & Greatest
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?
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—17
Powered by rjh-design
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.