Development of gsaw-js v0.1 - The Scipio Files #11

in #utopian-io3 years ago (edited)


Development of gsaw-js v0.1 - The Scipio Files #11

As some of you might have read here @utopian-io has already received about 15,000 contributions of which a little over 10,000 were accepted in the last 3 months. That's a fantastic achievement of course - congrats to Team @utopian-io ! - and even more so when you come to realize that the last month more contributions were generated than the two months before that.

However, what @elear's article, I just referenced, doesn't say, but is in fact true, is that out of those ~10,000 accepted contributions only about 6% belongs to the "Development" category. And although I did do some development work under the @utopian-io flag - ref. my UserAuthority (UA) work - I posted the "invention" articles about UA under the "blog" category here and there, and it was @stoodkev (whom I've helped in development) that offered to assist me developing UA and blogged about it here and there.

So, starting today, both in order to help @utopian-io grow in the "Development" category and to have some development fun as well, I'm starting my own contributions to the "Development" category myself! (And don't worry, for those who follow me regularly, I will also continue to post tech tutorials as well).

Introducing gsaw-js v.0.1: An "Add Water" Animation Library built on top of GSAP

The web - in general - has improved its general look-n-feel, usability and functionality a lot over the past few years. Many factors have contributed to that improvement, too many to discuss in this article. But to name some important ones, there's of course the Open Source movement in general and the Wordpress movement specifically, empowering many websites and (beginner) web developers. To make great-looking websites, as a developer, you need to learn about design, front-end development, some back-end development including the Wordpress API, content management, a bit of systems administatrion, responsive design / mobile-friendly web development: there's really a lot to cover, master and comprehend at all! And since it's about impossible - for most developers - to master it all, many use standard libraries and copy-paste some code here nad there to make things work. That's perfectly understandable, and alright even: everybody needs to make a living of course. But let's see if we can improve both the end-user and developer experience...

I've been intrigued with web animations, I think they're really cool and that they bring something new to the (web) table. One the one hand of the spectrum, there's the "Just Add Water" Animate.css library, which uses CSS3 Animations for web animations. And on the other hand, you have the GreenSock Animation Platform, GSAP, which is an extremely powerful, fast, elegantly coded, yet hard-to-use-for-many web animation environment. Now - form a technical perspective - I think HTML is designed for content and document structure, CSS is meant as a presentation layer of that content and structure, and (client-side) JavaScript is meant for DOM manipulation (to change states depending on what event happens when). And therefore I think web animations should be done with JavaScript, not CSS. However, although anybody able and willing could study and use GSAP, that requires a significant amount of JavaScript knowledge. Yet I'd like to see many more GSAP-enabled (Wordpress-powered) websites out there, so enter gsaw-js !!!

How to use gsaw-js

Well, actually I'm trying to make it as simple as possible to use gsaw-js on your own websites / templates / Wordpress Themes. You only need to know a bit of HTML and CSS, no JavaScript skills are required!

All you need to do is look up the effect you want to use, and add the corresponding effect class name to the DOM element you want to apply the effect to.

For example, in case you want to add the "Swing" effect to one or more a { display: inline-block;} hyperlink(s), simply add the gsaw-swing class name to your hyperlink like so:

<a href="" class="gsaw-swing">Some Button Text</a>

... and then, BOOM!, straight out of the box, it just works! You only need to "add some water" to the element, like I did styling it with a purple background-color, some padding, and some margin. How everything looks is simply CSS styling (= the water you add yourself).

This is what I've built thus far, for v0.1 of gsaw-js:



PS 1: currently gsaw-js has jQuery Core (and of course GSAP's TweenMax.min.js and TimelineMax.min.js) as a dependency. The GSAP dependencies will remain there, but I'm not sure what to do with the jQuery dependency. Currently it's just there as a convenient "Selector Engine" and I might either keep on using that in future gsaw-js versions or completely remove the jQuery dependency (or replace it with something like D3.js ?): let's see how the project develops.

PS 2: not all my "development articles" will be this lengthy. The coding itself takes enough time already! ;-) This was just an introductory article to announce gsaw-js.

PS 3: if you have cool animations ideas you'd like to see me add to the gsaw-js repo, just describe to me how the effect could look like, or drop me web-url you found somewhere to show me an effect just like it built with some other tool. You can share your ideas via the comments o send me a DM over at the Utopian Discord chat server.

More Open Source projects for me to contribute to

Starting today, I'm also open to help development of other Open Source repositories than just my own! So feel free to contact me, for example via a DM on the Utopian Discord chat server in case you think me helping on the development of your own repository could be interesting to you. I'm - amongst other things - a so-called "Full Stack Developer", meaning that I can code both frontend and backend applications. I code HTML, CSS, JavaScript (both frontend and backend, nodeJS), PHP, C, C++, GoLang, Python (2/3), and ShellScript. However, please keep in mind that I'm quite "picky" about which repositories I want to co-develop. I always need to see some benefit in the repository's potential that one way or the other could help achieve my own goals.

For example @stoodkev's SteemPlus Browser Extension could be interesting for me to help grow, because it improves the Steem Ecosystem User Experience (UX), which in turn improves the current Steemians' activities and helps onboard newcomer Steemians. itself would be another valuable project to co-develop (although I'm not sure who to contact for that...), so is (both the frontend and the backend / bot code), and so is @howo's and @fredrikaa's Anyway, there are thousands of interesting projects to help grow, and if YOU think I'd like to assist your own projects: you know where to find me!

Enjoy gsaw-js !!!


Posted on - Rewarding Open Source Contributors



You've got a 1UP from the @utopian-1up curation trail. Your quality contribution to the open source communitychas been rewarded by all Utopians following the trail.

Join 1UP for better posts and high curation rewards.

1UP is neither organized nor endorsed by!

Cooool! :-) Let's soon discuss adding some GSAW / GSAP animation effects to you're 1UP logo / appearance / own website (?) as well Flauwy!!

Great idea and addition to Utopian.

I rmemeber when Dan first released animate.css, it really did help introduce the idea of css animations to a lot of developers. hopefully your project gsaw could do a similar thing for js based web animations. gsap is an awesome tool but tottaly not begginer friendly.

Perhaps if you're just using jQuery for the selector engine you could use sizzle instead. Sizzle is jQuerys selector engine broken out into a separate utility.

Thx for your comment! I agree completely that GSAP isn't beginner-friendly and because Animate.css is such as big success, there's a clear need for cool "just add some water" web animations that only requires adding an HTML class name and the inclusion of my JS repo (minimized, eventually, or just adding a few effect snippets you want to include in a project).

PS, there are multiple ways to select / target elements, even using just document.getElementsByClassName(names), but I'm currently not sure if I want to support more advanced yet easy-to-use selections later on in development. SizzleJS could be an idea to use, so could D3JS or jQuery itself, or I could just strip jQuery out completely. Let's see, I don't think including a bunch of overhead-code this size makes a big impact on performance, but in case it does - eventually - I'll look into it! ;-)

Edit: self-upvoted for context-visibility (the Steemit interface could / should deal with that as well... because I wrote such a long reply to @julieNBH's comment, this reply of mine to @sambillingham completely lost visual context... Maybe we can partially auto-collapse long comments, or add some UI element to "group" comment threads that belong together...)

Projects like already does that. I don't get why we should use JS for animation unless maybe for games.
Also there's a new API in the works coming just for that (High FPS animations with no libraries) has a nice UI with building blocks! And it transpiles / exports to CSS3 animations. The reason why I don't like using CSS3 for web animations, is that it requires modern browsers (although that's not a big problem anymore), but far more importantly it doesn't allow quick "scene reordering". Suppose, after coding a bunch of animations, you decide (or your hiring client decides) to move "animation part 5" to "part 3" and "part 2" to "part 4". Then you're back to square one!

However, using GSAP (and my gsaw-js therefore as well) you can "wrap" animation scenes in multiple timelines. And also it allow for re-using pre-built animation components. The problem with GSAP however, is that it's not exactly JS-beginner-friendly... And neither is "regular" CSS3 animation coding, why would otherwise Animate.css (and family & friends) be so successful?
gsaw-js is intended as a pre-fab "Add Water" animation lib. You only add an HTML class to the element you want to animate, et voila!

BTW: there's plenty more room for DOM / SVG / Canvas animations than just in games:
E.g. advertizing banners, web apps, call-to-action buttons... Just watch where I'm steering gsaw-js to! I'm hoping to commit v.0.2 later today!

Thank you for the contribution. It has been approved.

You can contact us on Discord.

This is a great source of programming ..Carry on my friend. .Best of luck .

Nice project! Looking forward to see your next contributions, especially regarding SteemPlus =)

thanks for sharing learning post.

That's really cool, I want to see some of these effects on Steem tools. :)

Hey @scipio I am @utopian-io. I have just upvoted you!


  • WOW WOW WOW People loved what you did here. GREAT JOB!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!


Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord

Woah! It is really cool! You perfectly know what i would find awesome xD i have a few ideas I would like to develop :) i will catch u on discord later!:D

Coin Marketplace

STEEM 0.24
TRX 0.02
SBD 1.06