Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Shrug ¯\_(ツ)_/¯

  • Posts

  • Joined

  • Last visited

Everything posted by Shrug ¯\_(ツ)_/¯

  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) ?
  16. ? Wow, well done ! That is an outstanding modification as it appears it would work nicely even when needing to recalculate dynamically. That is some true awesomeness, thank you Jack ! Does the neuronal firing in your brain ever overheat ? Slow down fella. ?
  17. @GreenSock ? Wow! Yes that helps tremendously what a cleaver approach and function! The only covet is to keep in mind the need for a grid with the right divisible rows and columns to have or retain those 9 positions - so I should be able to work with this. Thanks so much that is truly awesome Jack. Thanks for graciously and so nonchalantly whipping that up along with the example! ¯\_(ツ)_/¯ I don't know how you make it all look so easy. :--)
  18. Hi @PointC, thanks for the response. But wouldn't that be the case if there were only 9 items? When I mention 9 I'm speaking of those 9 positions mentioned in my original post, within a grid as mentioned in my follow up post, which I think I was in the process of updating when you responded. @GreenSock, I am just wondering if the logic is already present in advanced staggers, or if I'll need to somehow calculate that myself.
  19. Thanks for the reply, sorry I will try to clarify. Meaning if you have a square / rectangle grid of any number of items (target elements) can you easily set the starting stagger point to trigger from one of those 9 positions mentioned above when invoking the stagger? I hope that makes more sense. Like this: I thought I read where the new advanced staggers had logic to update the index to know when the grid changes (rows/columns). That is what I mean by dynamically and including reflow in my initial post. The question is can those 9 positions be targeted easily?
  20. Hi all, I’ve been wondering if currently there exists an easy way to target the 9 typical transform points of a box / grid with the new staggers? TL - top left TC- top center TR - top right ML - middle left MC - middle center MR - middle right BL -bottom left BC - bottom center BR - bottom right Those 9 reference points are common typical points of transforms. I see there is already various nifty calculations being done but is that 9 position logic also 'dynamically' possible even with reflow (like others) within the new advanced staggers? ¯\_(ツ)_/¯ Thanks everyone!
  21. So much for those smiles, I guess not anymore, now its some sort of diaper poo brown color. Yikes, what happened someone put me in da sh!tter? ¯\_(ツ)_/¯
  22. You're welcome. Yikes why are those pens playing when quoted? Many times when things are created they stand without needing updates or improvement going forward for many years until the actual specification catches up without the need for such libraries. Sometimes things are simple regarding intention that they simply just work from the day of their inception. In which case either Harvey or Paul's implementation (or others) may still serve you well if you need them for support and backwards compatibility. Sorry about my persona quotability. I love that ascii shrug it makes me smile whenever I see it. Plus it gives me a clean greensock-ish green avatar by default. @¯\_(ツ)_/¯
  23. How far back do you need to provide support for browsers? Harvey was adopted from Paul’s matchMedia.js, while Harvey was updated 6 years ago, Pauls was updated 2 years ago … so can you just use Pauls? Certain things work regardless of needing updated solely based upon their intensions, is Harvey beginning to fail for you in some way? Here are some GSAP specific examples you may find interesting: https://codepen.io/osublake/pen/vExQEy https://codepen.io/osublake/pen/jLLqbY https://codepen.io/PointC/pen/RGmdVx etc., (some of those examples may be in the links @PointC mentioned above)
  24. I'm not sure if it would work in your instance without knowing or seeing the types of things you are hoping to accomplish via animation. But you could also export or create sprite sheets from your Blender model / animation and use GSAP to play through / control that however you would need. This approach may help you in certain instances with your project also. ¯\_(ツ)_/¯
  25. Hi @Robert May I was previously not familiar with the Blend4Web option, but I would maybe suggest using this workflow: Blender --> Export glTF --> Three.js --> GSAP The following links and examples should provide solid insight into that workflow if you're interested. https://medium.com/@matthewmain/how-to-import-a-3d-blender-object-into-a-three-js-project-as-a-gltf-file-5a67290f65f2 https://threejs.org/docs/#manual/en/introduction/Loading-3D-models https://threejs.org/docs/#examples/loaders/GLTFLoader https://codepen.io/shshaw/pen/yPPOEg (glTF , Three.js, Tweenmax, basic example) Hopefully something from those will maybe help to assist your efforts and desired goals. ¯\_(ツ)_/¯ PS: I am curiously excited to see what @Dipscom works up after some coffee(s).