Jump to content

Shrug ¯\_(ツ)_/¯

  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

1,502 profile views

Shrug ¯\_(ツ)_/¯'s Achievements


Newbie (1/14)



  1. Hey all, the above approaches look like nice approaches. ;—) Since I happened to notice the old OP mentioned blend-modes, maybe “mix-blend-mode: difference;” would be applicable for some? You can make that go from white to black and reverse. Except regarding the various still lack of browser support sadly. :—( https://css-tricks.com/reverse-text-color-mix-blend-mode/ https://caniuse.com/#feat=css-mixblendmode Midnight.js (or others) might be another option for some. http://aerolab.github.io/midnight.js/ You could probably even just use a small function to determine if it needs to be black or white, etc., and conditionally pass that reference into a tween to make a smooth transition between colors across sections on scroll. Here is one example of determining color. https://stackoverflow.com/a/35970186 ¯\_(ツ)_/¯
  2. The character animation aspect sounds cool for sure, especially coupled with the SVG to Canvas, that might be another viable workflow for animators using GSAP. I saw you're a technical animator so you certainly have insight into workflow into those aspects. Keep up the good work, nice job and thanks for sharing!
  3. Thanks for sharing @Luckyde. Nice job, congrats on your efforts and the release of elCanvas. The converter sounds interesting also, I've messed around with that myself >< both ways. At a glance some aspects remind me of the TweenCanvas library, which didn’t get much fanfare (except a singular like from OSUblake ;--) when posted here. https://greensock.com/forums/topic/6076-html5-canvas/?tab=comments#comment-79286 I’m looking forward to hear @OSUblake's feedback on things once he concludes his "Planes, Trains and Automobiles" excursion. Be safe out there.
  4. Here is an example integration of ScrollMagic along with Smooth Scrollbar. https://codepen.io/luluberlu/pen/gZGwoW The integration of those two is also discussed in the following discussion (perhaps others also). https://github.com/janpaepke/ScrollMagic/issues/652 Maybe that might assist you in some way if you wish to take that approach. Of course test extensively regardless of what approach you take to ensure what you create is performant across browsers and devices as the users scroll. @OSUblake, ? that example and related thread(s) will never die, its part of your legacy here at the forum. ;--) ¯\_(ツ)_/¯
  5. Hi @Its_Lefty, Welcome to the forums. Based upon the example site you showed, I feel the below examples may help you better achieve your goals. https://codepen.io/jbsmith731/pen/dWvRBX https://codepen.io/ethanwalpole/pen/xorjLK https://codepen.io/PointC/pen/zaBYoW Hopefully something within those examples will help your efforts. Again welcome to the forums. [ EDIT: Did some formating change on the forum that is parsing the links? Instead of just posting a link it parses it to "See the pen..."]
  6. Hi @conceptstoryde, Welcome to the GSAP Forums! Thats a pretty broad spectrum question and a bit much to ask. ? Thats better. ;--) Here are some threads that may assist you with gathering data-attributes for use with GSAP. • https://greensock.com/forums/topic/19421-gsap-valuesprops-from-data-attribute/ • https://greensock.com/forums/topic/11723-using-inline-data-values-to-tween/ • https://greensock.com/forums/topic/12143-data-attribute-to-timeline-variable-name-need-advice-from-javascript-wizards/ I assume that is what you are asking? Please specify further if I am mistaken. If you're having trouble or need further help please create a codepen as shown here. Then someone can try to assist you with issues you might be having as shown in your reduced codepen test case. Assisting with building entire sites is a bit much to ask of forum members, though there are plenty of people willing to help when you get stuck on something specific pertaining to GSAP. :--) Again welcome to the forums, you are gonna love GSAP.
  7. We all know @OSUblake wants to optimize and blake-ify that snippet, but fears doing so will cause this thread to also get added to the list of threads causing him perpetual anguish. :--)
  8. Nice, they could of prefaced it with: TLDR - developer bliss. ?
  9. Welcome to the forum @dylanlarrivee If you're speaking is this example: It looks like you could maybe just set the _gsTransform += half the size of the your desired rect dimension in the updatePath function. var x1 = handles[0]._gsTransform.x+10; var y1 = handles[0]._gsTransform.y+10; var x4 = handles[1]._gsTransform.x+10; var y4 = handles[1]._gsTransform.y+10; For instance if your rect is 20. <rect class="handle" x="0" y="0" width="20" height="20" /> <rect class="handle" x="0" y="0" width="20" height="20" /> Maybe that will help get you heading toward your goals, or someone else will have a better suggestion if thats not performant enough. This thread might be played out with custom requests though. I think @OSUblake specifically might be tired of it, similar to other threads, (ha, ha). ??
  10. https://canistop.net/ ¯\_(ツ)_/¯ I’ve happily read that in Bootstrap v5 they are dropping JQuery and IE 10 & 11 support also. Given its popularity, I hope each will help diminish the usage of both in the industry. IE is much like a roulette wheel with all red while trying to hit black. ? https://caniuse.com/#compare=ie+10,ie+11,edge+12,edge+13,edge+14,edge+15,edge+16,edge+17,edge+18,edge+76
  11. Shhh .. I was trying to be discreet. ? <non-discreetness> But in full disclosure I meant to name drop and blatantly thank all those folks (+more) for all they do around here. Indeed most their posts are full of nuggets of gold. Anyone viewing this thread (13K+) please note the forum search and taking time to back read through any of these peeps posts is like GSAP gold just laying there. Pure GSAP goodness to be had by all, so be sure to profit from it. </non-discreetness> I thought it was fitting in light of the original tone of the thread.
  12. Thanks for that Joint.js reference. I had also known of it and was gonna post it also but didn’t notice or realize they offered an open source version (cool I better re-look at some others too). There are also others which are only payment or subscription based. Along with a lot of other frameworks related specifically to flowcharts and diagraming which offer connectors but those may or may not have the required events, callbacks etc., logic included. You can even find some nice D3.js, etc., examples which are relative. Many options to choose from but of course no one size fits all. So it just simply can't be definitively answered in a simple forum post to satisfy everyone or every need for such a broad topic. ;--) Nah I don’t accept that, my post was basic. Not to name drop (and in no particular order) but virtually every snippet and code logic discussion posted by any of these users are generally encapsulated with nuggets of pure brilliance and learning opportunities: @GreenSock , @Carl , @OSUblake , @PointC , @Jonathan , @mikel , @Dipscom , @elegantseagulls , @Rodrigo , @Shaun Gorneau , @Sahil , @Acccent , @Diaco , @Victor Work , @Visual-Q , ++++ so many others. Including many single post wonders by people which are never to be heard from again. Many thanks to all ! These people and many others are all Greensock forum heroes, and much more worthy of such high praise for their daily posts. But I'm still glad you liked the post, thanks.
  13. Hello all, I was also shocked myself reading the OP comments. ¯\_(ツ)_/¯ I’ve been interested in this subject matter for some time. So since this thread was recently bumped and new to me, maybe some of the following research will be useful to someone. But more importantly hopefully allow people visiting this discussion to better understand the complexity of what is actually being asked in this thread. • jquery.flowchart https://github.com/sdrdis/jquery.flowchart • Total.js Flow https://github.com/totaljs/flow • Rete.js (formerly D3NE) https://github.com/retejs/rete • RPD https://github.com/shamansir/rpd • JSPlumb https://github.com/jsplumb/jsplumb • Etc., Most of the above JS frameworks offer events, callbacks etc., in addition to the connector logic so they might be good inclusive starting points or alternatives for someone wishing to develop something? Here is also an (old) logic based article discussing Angular: https://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS https://github.com/ashleydavis/AngularJS-FlowChart Even though that article is old it should still be relative regarding general logic to React and Vue workflows also. I believe some of the above JS frameworks also have examples using these as well if you look around. All of the above seem pretty relative as example approaches. Of course it could be simplified if you are willing to write your own connector and drag drop logic based upon your specific needs and requirements. But if not then some of those may help people. Of course @OSUblake has the talent to roll his own complete approach, but I would definitely not think anyone should expect that of him to be offered freely here in this thread (regardless of how ridiculously talented he is :—) and beyond what he already demonstrated and offered here already. As everyone should quickly see from the above examples this is not something that will be easily explained or offered through a simple thread query. As these systems can be quite complex when you factor in all the needed logic even for basic systems, which can differ vastly between each usage case and requirements. The above should afford people viable approaches to this, so hopefully something will be useful to someone (13K+ views?). ¯\_(ツ)_/¯
  14. To me, I think that approach is the most logical and robust to traverse rows/columns via any percentage represented through 0-1. Thanks again!
  15. Thanks for the conversation! In your comment, yes the latter functionality was what I was also inquiring about with my 'dynamic & reflow' reference even back to the OP. But I think even the former statement could be accomplished using the above approach, if reinitiating and recalculating things are taken into account before a tween is run again after completing, etc., (with some user logic as needed) ?