Development of gsaw-js v0.2 - The Scipio Files #12

in #utopian-io6 years ago (edited)

1.png

Development of gsaw-js v0.2 - The Scipio Files #12

Hi everybody! Two days ago, I announced my new ["Add Water" Web Animation FX Library gsaw-js v0.1], and today I released v.0.2!

What's new?

  • I've added 6 more effects to the library code, being "Wobble Skew Top", "Wobble Skew Bottom", "Wobble Horizontal", "Wobble Vertical", and even two 2.5D / 3D transformation effects called "Rotate X" and "Rotate Y";
  • I've changed the example page header;
  • I've added a few inline JS variables, such as origin and transformPerspective (the latter for the 3D perspective effect).

This is what the new / extra / added hover effects look like!

gsaw-js-v0_2.gif

POW: Here is proof of my code commits to GitHub, regarding this v.0.2 version

pow-gsaw-js-v0_2.png

What's coming / planned for v0.3?

I'm thinking of adding a number of cool border and background-color effects, but because I want gsaw-js to remain extremely beginner-friendly (to implement on any web project, without any JavaScript knowledge), however the gsaw-js users still need to be able to configure parameters like backgroundColor, but without needing to change te JS code! I think I've found a way to accomplish that, still need to code it, so stay tuned, and in the mean time....

Please enjoy using gsaw-js v0.2!

@scipio



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Nice effects! Keep up the good work!
Approved!

You can contact us on Discord.
[utopian-moderator]

Thank you Utopian [mod] @stoodkev! Bleep! Bleep!

The DOOR effects are cool!!! XD
But still can't imagine how to use them besides buttons... any idea?

That "door" 3D effect is cool huh! Many more to come in the new gsaw-js versions!

gsaw-js, as it is now, can be used on every inline-block or block level html element. Just clone / download my repo, place some image inside the index.html file, add a class to it, like <img src="myImage/png" class="gsaw-swing" /> and add either an inline or external css rule like so:

img { display: inline-blook; }

Then you can apply all the button effects I showed already to the image as well! And that's just one way to use it: I'll keep on adding more effects to the gsaw-js repository, and improve its functionality as well (I might for example at some point add a JS parser function that scans the order of multiple gsaw-js effects assigned to the same target element to be animated, and combine effects on it!).

gsaw-js can be used for website development, web application development, game development, interactive banners, and even as a UI spice-up for extensions such as @Steem-Plus. There really are many use cases for it, just imagine some, and be creative on how to use it! :-)

I will use it in my future open-source template ;D
Thanks for this amazing contributions and all the support!

You are 100% welcome!!! Your Personal Coding Sensei is at your service!

Osu! ;-)

I think I have the freaking most amazing coding sensei! Like a kid having Bruce Lee or Ip Man as martial arts teacher!

Wax on, wax off..... BANZAIIIII! 🙈

♥♥♥very well post dear really this is a orgonial wark and i like your post♥♥♥

It is quite a piece of orgonial wark, "innit"? :}

HAHAHAHAHAHAHHAHA

good stuff la :}

It's good innit! Lolla! Holla Lolla! :}

I think this would help maintain a high standard for coding too... Also have to limit access to non team right?

Non team? I fully open-sourced it! Everybody can use it for free!
You can download / pull / fork / clone my gsaw-js GitHub code right here

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

Achievements

  • 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!

mooncryption-utopian-witness-gif

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

Coin Marketplace

STEEM 0.29
TRX 0.12
JST 0.033
BTC 62559.43
ETH 3092.10
USDT 1.00
SBD 3.86