Shrug ¯\_(ツ)_/¯

Yeah sorry , I've edited my post (removed links) to not diminish or muck up your thread.

Noticed the following Blender script the other day. It’s fairly new but maybe something to keep an eye on. Definitely an interesting endeavor so hopefully it develops further. B2G - Export Blender animation to GreenSock https://github.com/gecko0307/b2g You can use Bodymovin / Lottie coming out of After Effects (or other apps) with GSAP. Search around and you’ll find various information and examples pertaining to that across the web.

You’re still approximately 300 lines of code past the original concept by @ZachSaucier . I suspect most your issues are coming from your own additional logic (not GSAP) concerning the features you have added and the general jquery-ifying of things probably has not help also. 😉

Welcome to the forum @Fly The Coop, In addition to the examples that @Rodrigo provided above, the following additional examples might prove useful for yourself or someone else also. https://codepen.io/GreenSock/pen/eYBYMyw https://codepen.io/medienbaecker/pen/vYgLYBL https://codepen.io/mikeK/pen/eYNaxxd https://codepen.io/PointC/pen/GvyXYX Hopefully something helps your efforts towards your goals. 👍

This thread might prove useful also. 😉

Matter.js is not a GSAP product, so there is no support provided for it here, that is out of the scope of this forum. However you will find many example demos on their site, CodePen, etc., all the links can be found on their site. Maybe take a look at using sprites (again many examples can be found for this) in doing so you can use any desired shape or object. All the best on your project.

👆Indeed. That site appears to be using Matter.js for the collision detection logic / effects. As Rodrigo pointed out in his post, you can benefit greatly from understanding the general logic of basic collisions yourself before using a complex library like Matter.js to go further.

Hi @Charlie Stevenson, I'm glad @mvaneijgen was able to help you sort your question. 👍 I removed both pens, due to them referencing paid Club plugins in the HTML section. This would give free access to those plug-ins to others. Please instead start with the GSAP (mininal-demo) minimal-demo (read more about it here) which includes access to the paid plugins for use only on CodePen. Thanks for your understanding. 😉

@joxd concerning Three.js, the following two pages from the Three.js docs should help allow you to create responsive outcomes. https://threejs.org/manual/#en/responsive https://threejs.org/manual/#en/rendering-on-demand Similar concepts apply to vanilla canvas projects also. In the end if you still feel there is a logic gap coupled with using ScrollTrigger then I'm sure someone can assist. If so please provide an example / Codepen demo showing your responsive Three.js along with including your ScrollTrigger setup that is not working properly. Sorry if things were misconstrued here in various ways, we are happy to have you here and wish you much success with this and all your projects using GSAP, ScrollTrigger, etc. 👍

I too am quite confused by all your posts here and how you are seemingly misrepresenting the responses that you have received here in this thread on the GreenSock forums? ¯\_(ツ)_/¯ You were asking about responsive tendencies then switched your entire feedback and arguments to accessibility. The feedback and advice you have been given has been correct as has been the initiative to try and help you through asking for pertinent information on what you are hoping to accomplish along with your own relative demo. None of which you have chosen to provide. In the end both responsiveness and accessibility are up to the individual developer to implement based upon project requirements and expectations regardless of using GSAP or Three.js or any other web stack. 99.9% of the examples you find on this forum answer specific GSAP logic questions and do not encompass the full spectrum of development requirements, nor should they. You mentioned that the Three.js forum was unkind to you and sent you here? Though the only relative recent posts relating to the same topic that I can see over there are the following, in which no responses were given, nor was that user ever directed to these forums. These comments specific to your initial comment above (none of which received a response on the Three.js forum): https://discourse.threejs.org/u/peet88/activity Recent overall GSAP threads / posts: https://discourse.threejs.org/search?q=gsap%20order%3Alatest The problem with injecting into an old thread that was already answered correctly for that logic requirement, is that you have now changed the scope of the thread which it never intended to address. So it’s immensely difficult to assist when a person just points to other peoples examples, threads, discussions and simply gives the blanket claim that something does not work. When this occurs there is rarely enough relative context to move forward with this approach and provide concise answers. The GSAP forums are some of the friendliest most helpful developer / code related forums you will find on the internet. GreenSock products are innovated and supported on a level rarely matched. So it’s really disheartening that you have chosen to misrepresent the sincere responses which you were given and make claims in response that simply are not accurate or true.

You had an inadvertent distress signal there I believe you wanted @PointC. 🔦 😄

Some of the general concept reminds me of this demo from this article. Albeit that one is a bit janky with the old school set/clearTimeout approach vs requestAnimationFrame, etc. Or for-the-win of course GSAP 🏆. I look forward to seeing @OSUblake’s full blown Three.js RTS game when he is done here. 😂

¯\_(ツ)_/¯ Maybe @GreenSock will shed some of his genius upon the subject in addition to the nice thoughts both @mikel & @akapowl provided. 😉

This gist tried to extract relative things from the documentation into a more concise list, it may help you some? https://gist.github.com/lunelson/7d83ca0c8bdfab170dd3. As stated "Standard CSS properties are all supported, with hyphenated-names becoming camelCaseNames." so the following list might help you some. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties. I think GreenSock would need a ScrollTrigger enabled infinite scrolling page to even remotely try to list what all GSAP can animate. 😂

👍 I’ve thought about this scenario in the past also. When using ScrollTrigger scrub and wanting that scrub effect but then if the user stops at a certain % to finish the tween / timeline and yet accurately still retain all the scrub / ScrollTrigger features when the user recommences scrolling. I never really dove into it though (some things happened that averted my focus 🤕 ) to decide what would be best. It's still a bit of a mind puzzle as I try to rethink on it. 😂