React SVG Bubble Slider
You’ve probably seen reactions before on social media, Twitter, Instagram etc all have ways for users to show their like or dislike for user posted content but you don’t normally see reactions on blog posts.
The standard for the most part is to present the user with a comments form where they can leave their name and a comment. I wrote a tutorial recently for Fauna which walks you through how to build a comments system for a Gatsby blog.
You can read that post here
One problem i faced with the comments approach was moderation. If you provide a way for users to write anything they want in a comment it’s only a matter of time before some tinker writes something rude. As part of the above tutorial i factored this in and provided a way to add moderation so you, the admin can control which comments are displayed and which ones you delete.
Aside from making the application and back-end more complicated you’ll also need to regularly login and approve or delete comments.
This seems like a hassle and so i went back to the drawing board and decided that perhaps allowing users to leave a reaction was a faster way to gain feedback from users.
I toyed around with the heart and thumbs up / thumbs down idea for a while until i stumbled upon this tweet from Chris Gannon
Today's interactive animation from 2016 is Emoji Bubble Slider. It's dynamically built and the emojis are 'glued' together using the goo filter effect. I have licensed this a surprising number of times! #animationAtHome pic.twitter.com/vW9OlLkYWw— Chris Gannon (@ChrisGannon) May 15, 2020
As soon as i saw this i thought this would be the perfect way to allow users to leave reactions on blog posts.
I contacted Chris and explained the idea and he was up for open-sourcing it. He has specified that so long as it’s not used for commercial gain users are free to use this in their blogs.
Here you can find the full demo.
The original SVG Bubble Slider isn’t built in React and also uses GSAP v2 so i had quite a bit of work to do to make this work in React and using GSAP v3 but the biggest hurdle was how to work round the GreenSock members only plugin issue.
GreenSock is for the most part open-source but they do offer extended licencees for members only plugins if you sign up to Club GreenSock
One such members only plugin is the InertiaPlugin this is responsible for the throw-able effect you get when you drag and throw the slider.
GreenSock will licence this plugin for use in commercial products but they don’t really want their members only plugins available in open-source projects.
This poses a dilemma for Node modules 🤔
The repo for this project doesn’t expose the source code for the InertiaPlugin but naturally the bundled Node module does.
I had quite a difficult time explaining this to GreenSock. My main argument is that if you visit any website that uses
modules. If you did want to dig into your
node_modules find the
dist directory for
in the end GreenSock agreed with my approach.
You can read the full thread here
And so finally i’m ready to release this and have created a docs site using Storybook