Can Sparkle Do This?

Of interest to me is how the nav-bar at top snaps from transparent to a solid-white background during vertical scrolling and;

How that the very top element has a slow moving zoom-in effect on each successive panel - which is timed to scroll on it’s own left-to-right.

Can Sparkle do either of these things?

The rest of the site seems very straightforward.

in some ways, yea

for the first one, check this out: Animation | Sparkle Documentation (scroll down until “Animation Usage Guide”

for the second one, you can use the animation “Zoom” with a very long duration for this. The bars in some kind of right to left animation with a long duration as well, but they won’t be near as interactive as those in B&W website

1 Like

Very cool thanks for the reference.

Yeah I kind of figured this site is a little more advanced than what Sparkle can do but it’s good to know it can get close!

Yes it can.

Sparkle animates objects while scrolling based on the size of the height of the page (with percentages). Maybe the Sparkle team will consider animations based on pixels on a future release if it doesn’t complicate the simplistic approach of this amazing app.

Here is an example of a Sparkle page (only desktop layout is available for now); On this design, the header background is set to be hidden at 0% and visible at 1%.



Nice effect that the menu background appears a little later. I even managed - with some thinking - to recreate this.

This fits quite well for a one page website. If this is used on all pages of larger multi-page websites, it can be annoying.

Too much animation is not good either. Less is sometimes more.

Mr. F

There’s actually a crossfading header sample project in our animation documentation:


I just put the link to the “manual” in my favs so I can refer to it all the time. So much info I didn’t glean way back when I bought V2!!!

Is there a PDF version of it anywhere so I can print and learn when I’m not online?

Unfortunately we don’t. The documentation is built with Sparkle, and setting it for print is a manual process, which we haven’t done for Sparkle 3. We’ll look into it for Sparkle 4.