Oh boy, this project had me jumping through hoops to create a style inspired by Apple’s last years website of the MacBook Air.
The owner of PDF Office (Saied) was very specific and may I say it made my job a bit easier.
The Sparkle powered website is built around an innovative and cutting edge PDF editor, called PDF Office offered as a stand alone app, no subscriptions.
The animation was the ultimate challenge! Duncan even made further tweaks to the scale on scroll settings for me to be able to achieve the introduction animation on scroll, but I got there in the end!
Visually the PDF Office is on mark, open, clean and with an air of minimalism. This all alludes to the intuitive and client-focused approach the PDF Office has taken as an iOS and macOS app.
Nearly half of the mobile device was redesigned to take in the functionality of the desktop on the smaller screen. Also onboard is Sparkle’s native blog which looks the part! And you will notice sleek Popups galore!
Overall it was a challenging website to build across the 1200 & 320 devices (768 auto scaled) but in the end Saied and I are stocked how it all turned out!
What do you guys think?…
Hey @FlaminFig , I have just checked it out on mobile, and wow, I’m impressed. It must have taken a while to get the result you wanted. You have even sold me on the product too, looks interesting.
Keep up the good work, top of the class
Best regards
Simon.
It looks good but some tweaks could be done to improve the experience (in my humble opinion), that much blur on the animation makes me fuzzy, the name zoom should leave you in something that is not pure black, … Over all, it’s good and we need more websites like this
I just have a small issue with the scroll-in animation (the big zoom). With my slow connection, the animation seems buggy: it shakes, and the zoom doesn’t trigger properly when the page loads. I know it’s not really in your control, but I just wanted to point it out.
Yes you’re right it did take me a heap of time to get it looking tops on mobile but as you’ve seen it was well worth it, and really highlights how we can push Sparkle and have it sit there with the best of them!
As you would have guest I was within the PDF Office app for hours to get a good feel for it, and to screenshoot the needed screen images for their website.
It was a really good solid experience! Well worth giving the app a go!
For sure @dpamping your thoughts and feedback is of value, and I get what you are saying. My client was very specific in the animations and with this one we went backward and forward so many times to find a balance!
The transition is dependant on how slow / fast the User scrolls, so on average we are looking at 1-2 seconds which isn’t bad. Moving into the black is intentional to have the next section contrasted and stand out.
Thank you for you kind and uplifting words! I try my best!
If I may, a couple of very small typos? In the first text block after the reveal it should read ‘comprehensive suite’, and under About Us, ‘We are lovers of the…’
Hi @Allan, and thank you for your kind words… appreciated!
Yes what you mentioned has been a challenge! For those animations a lot goes on, and on Macs the GPU (graphic processing unit) kicks in and on an older machine it isn’t that smooth. Trying/testing it across the many browsers (1400px plus in width), Chrome did the best job with a smoother experience on my iMac 27’ (2018 model). Once you reduce the browser width to around 1000px wide all comes good on the older Macs.
Trying it on mobile devices (tablet and mobile) the animation is buttery smooth!
So unfortunately it is a older Mac machine problem with an under powered GPU.
Just to clarify, the issue doesn’t come from my computer, as I’m using the latest model (MacBook M3 Pro), but rather from my slow internet connection. The text loads before the animation, which causes strange jittering when the connection is slow. I know that animations can sometimes stutter, but once everything is loaded, the animation displays correctly and the effect is nice!
I also have a 2012 iMac, but I haven’t tested it on that machine yet. However, I’m aware that older GPUs can degrade navigation, and browsers that haven’t been updated for a while may display things differently. For example, text with a gradient generated by Sparkle doesn’t display at all on Safari on that iMac, even with the latest compatible version installed. That’s why I avoid using this feature, although I imagine it doesn’t affect many visitors nowadays.
Thank you @Bob for your inspiring words!
Yes not an easy task to sell a product as for me there was a lot of “ducks to line up”.
For me the trick was to have the website feel and reflect what you can expect if you engaged with PDF Office app… Sleek, clean & understandable, easy on the eyes, and a breeze to use. For me a website has to also engage psychologically and emotionally a User to have the needed impact for them to take the call to action (CTA).
Well worth giving the app a go! 
I’ll get into fixing these.