Shrug ¯\_(ツ)_/¯

Nice job @mvaneijgen, The following may offer a less fuzzy understanding of the transform / coordinate system change when using objectBoundingBox. https://www.w3.org/TR/SVG/coords.html#ObjectBoundingBoxUnits This converter should also be useful at times for deriving the needed [0,1] coordinates when using objectBoundingBox. Instead of squinting to design 1x1 artwork 🎨 😁. https://yoksel.github.io/relative-clip-path/ Transform can also be used within SVG on 'appropriate items' when using objectBoundingBox and [0,1] coordinates. Utilizing the following basic math: Formula: 1 / Width 1 / Height Example / Output: 1 / 550 = 0.001818181818182 1 / 325 = 0.003076923076923 Then use appropriately in SVG: transform="scale(0.001818181818182, 0.003076923076923)”

Is this a GSAP question ? I don’t spot any GSAP logic being used in your CodePen and the main.js on your live site is also using the same code as your CodePen ? Once the image resources load it appears smooth to me though.

Welcome to the forum @anisos, that example is more of a WebGL, Shaders and complex logic question than it is about GSAP. Of course GSAP can animate anything on the web that it has access to. Here is one such example using GSAP where you can see the overall complexities of such an effect. https://codepen.io/RobinNavas/pen/KKNZLVZ Another simpler option would be using multiple Masks or Clip Paths (either SVG or CSS) for a less elaborate effect like the next example again using GSAP. https://codepen.io/theseventh/pen/yLYLjpg Besides the GSAP Core, you can leverage ScrollTrigger and Draggable, etc., which all work and sync up perfectly to the GSAP Core for even more fabulous possibilities. All these methods can be researched and discovered here on the forum, through the documentation and across the web in places like Youtube, CodePen and Codrops. In general custom sliders, carousels, galleries all require complex JavaScript logic beyond the scope or intention of this forum. Effects such as the link you shared introduce further complexities and required knowledge, so libraries like Three.js, Pixi.js, WebGL libraries, Shader sites, etc., can greatly assist you in conjunction with GSAP. Happy animating with GSAP regardless of what overall approach you decide to take. Good luck with your project. 👍

Welcome to the forum @ManishDev18, In addition to @mvaneijgen's always great advice and guidance, I thought it might be good to include this post from an older thread. It’s directly related to your initial screenshot although older and would need to be migrated to GSAP 3 with all its newer available features & utility methods, etc. Maybe it will also be useful to someone.

What article is that ? Similar has been inquired about previously on the GSAP forum. For instance this previous topic along with this one discussed a similar effect. The examples found in those threads should help you accomplish your goals, all the best with your project. PS: MorphSVGPlugin for the win, worth every penny. ?

Using @Rodrigo's above example the following would be closer to your example: gsap.set(skewBox, { rotation: 210, skewX: -30, scaleY:0.864 }); It might not be applicable to your desired setup (Div matching SVG) but wanted to mention that morphSVG plugin-in not only morphs shapes but also position and size, which at times can prove very useful. It would simplify things to choose all CSS or SVG, then either build everything with CSS and use the Flip plugin, or everything with SVG and use morphSVG, if you can ¯\_(ツ)_/¯.

You might be able to utilize some logic / approach from these two older pens by @OSUblake . https://codepen.io/osublake/pen/WjWPob https://codepen.io/osublake/pen/aRoqKm/c3a8ca782b69eedf260af82788d0084a

Welcome to the forum @zeus1021 , The vertical conversion has been discussed a few times already on the forum based on this original thread and subsequent article by @jh3y . See the following thread for an example of vertical conversion, take note to update the version of GSAP. That should get you going, good luck on your project.

Welcome to the forum @Pecuarios.com , thanks for being a Club GreenSock member. Based upon your description, I think the below examples will help you. These should all give you a starting basis of understanding to further modify things based upon your requirements and accomplish your desired criteria. https://codepen.io/osublake/pen/LdMjaL https://codepen.io/mikeK/pen/JjYaeRe/cf3df695077b033d9cab544546e2c3ca Here is a relative tutorial - https://www.motiontricks.com/movie-countdown-animation/ Here is another fun one not using GSAP, although with some effort the animation could be converted to use GSAP. https://codepen.io/lonekorean/pen/eYVrWoq Good luck on your project and enjoy using GSAP.

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. ?

This Quick-Tip article talks about dealing with the general concept of (FOUC) Flash Of Unstyled Content. ? https://greensock.com/fouc/