Categories
Squarespace Plugin

Squarespace Plugin: Animated Signature

An impressive animated signature on Squarespace cover page.

In 2020, Squarespace has become one of the most CMS out there, but back in 2016, it’s not quite popular that much, let’s see how a regular project feature become a Squarespace custom code request

Here is what we got

We are developing a site for a client using Squarespace and are looking for someone to develop a landing page that contains some short animation before redirecting to the home page.
Total time spent on the page will be 3 seconds.
…
NO FLASH OR PLUG-IN BASED TOOLS ARE ALLOWED. MUST USE ONLY CSS AND JAVASCRIPT.
Must also be fluent in English.

Create animated (standards-based) landing page | CSS | HTML5 | JavaScript | Freelancer

The customer is an artist they she got a lot of ideas on her mind, so I decided to send an email about the way of implement, then we decided to change animation to a signature on Squarespace

  • Discussion
  • Squarespace invitation
What is needed to be implemented
  • I decided to use svg for animation instead of gif for the best control on how the animation display
  • Custom css will be used to hide header and footer on the cover page
  • Javascript can control the speed of animation on the svg path
  • I use inspiration from this snippet: Animated Signature (codepen.io)
The animation in action – Lagging due to gif compression

Working one-on-one with client like this will take a lot time to completed, but after quite a lot resivion, she was very happy! And I am happy when client happy. Do you want to share the joy with me?

Leave a Reply