I tried importing the actual Sparkle App site so I could learn directly how certain elements work and how they were built. Unfortunately the “control” information doesn’t transfer (of course) so there are several elements that I’m trying to understand how they worked.
Is there any tutorial out there on how Sparkle’s own website was built?
There is no tutorial I’m afraid. We can look into specific parts, what do you want to understand?
I’ll re-import the site and go over the elements I can’t figure out.
Turns out nearly 80% percent of how the site was built isn’t clear to me. The use of “hidden” elements to create fades, animations, cross-element bleeds… it’s beyond my current knowledge of web-building.
Basically, it’s too much information to ask about. I simply need to learn more about web-design techniques - which apparently is super-deep compared to my limited skillset now.
I’ll use the built-in tools to do my redesign. I worry about multi-element combinations later.
The current Sparkle site design was made by the great @selcuk, I might have actually never said this publicly which is a failing on my part.
While the site is visually quite impressive (we like it a lot anyway), it’s not super complex to build in Sparkle.
Most of the animated elements use a little bit of scroll animation, such as scaling, rotation or cross fading. Admittedly scroll animation controls are a bit complex to wrap your head around, so it takes a bit of experimentation and trial and error to figure out. For example:
We added some hands on examples recently in the animation documentation:
https://sparkleapp.com/docs/animation.html
The only other “weird trick” the home page uses is a black gradient that’s fixed to the browser bottom, which adds a bit of a fade to black effect (and because fix to bottom is a setting of groups, the box with the gradient is grouped with another transparent box):
Thanks @duncan,
There are so many tricks to use in website design and I love Sparkle as it doesn’t need anything external to use them. You just need to change your perspective a little.
If you are also making Sketch to web, then the limit of what you can do is opened up even more.
