Leaderboard

There's a lot of HTML5 game engines like Phaser, Construct, PlayCanvas and Cocos, but I don't know how useful they would be for building a user interface. Like a lot of physics libraries, SAT.js does not do anything visually. It just calculates stuff for you. You have to wire it up to whatever you're using. Using Draggable + SAT.js like you described. It will move the draggable off of whatever item it does a collision check against, but there's a problem, just like I described in my previous post. When your draggable is moved off an item, it might be pushed onto another item. That item might have already been checked for collisions, or it might push your draggable back to the item it was just moved from. You can run through the collision detection process multiple times and hope that it will settle in a place where it doesn't overlap, but there are no guarantees without adding more logic to the process.

Simple collision detection is using Draggable's hit test. What you're asking is much, MUCH more complicated than that. You would need to use something like the Separating Axis Theorem (SAT), and find the Minimum Translation Vector (MTV). The MTV is the shortest distance that the colliding object can be moved in order to no longer be colliding. And collision detection should be done while you're dragging. Trying to check for collisions on drag end will only make it more complicated. What happens if you drop a box in the middle of 4 other boxes, so that each edge is overlapping a different box? There might be not be a solution as the different boxes can keep pushing your draggable back and forth between each other, resulting in an infinite loop. You can read up on SAT in the links here. You will need Flash to view some of the demos in those links. https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#Separating_Axis_Theorem SAT.js might be a good library to look at. If there's a collision, the response object will give you the MTV. https://github.com/jriecken/sat-js

Hi All: The question of using GSAP in WordPress has come up several times over the years, including a couple of questions from me. I finally got around to figuring it out and I wrote a tutorial on how this can be done. If anyone has suggestions or corrections, I'd appreciate passing them along. Hopefully it will be helpful as non-WordPress GSAPers continue to want to use your fantastic library in WordPress. Thanks.

Ok, for now i implemented option 3 and only mark the several 'ui' tweens with a data property, works very smooth. I might refactor my code to option 2 which seems a bit cleaner to me. Before dropping my questio nheere this was the approach I took, but not aware of the 'smoothChildTiming' which is crucial to prevent stange behaviour. Thnx again!

@GreenSock we were using ^1.20.4. Upgrading to 2.0.0 fixes it. Thanks!

Really helpfull! I was already at this exact moment working with the getAllTweens method and segregating the tweens by targets with the game property, but the data approach is cleaner. Thnx! I'll provide feedback after solving mu use-case.

OK, I see your point. I would also have to agree that Draggable should clean up userSelect on kill. It removes other stuff it adds like the cursor.

Yes, image width and height are good examples of attributes that can animated using the AttrPlugin. Attributes aren't too common on HTML elements, but for SVG, it's a completely different story. For example, this is what a circle looks like in SVG. cx is centerX, cy is centerY, and r is radius. <circle id="myCircle" class="circle" cx="50" cy="50" r="25"></circle> And to animate those attributes.. TweenLite.to("#myCircle", 1, { attr: { cx: 100, cy: 100, r: 50 } }); id and class are attributes too, but you normally wouldn't animate those for obvious reasons.

Thanks a lot to all community. Works just fine on v2.0.0 Will be able to still tweening

Here's a somewhat related demo. Using a little brute force to prevent any overlapping. You could do the same thing. And no, you don't have to move an element to figure out if it's going to overlap. Rectangles are a very useful model. Just update your model until it isn't overlapping. var bounds = element.getBoundingClientRect(); var rect = { x: bounds.left, y: bounds.top, width: bounds.width, height: bounds.height };

I like the idea of the functionality plugin in theory. I usually just have a single php file that enques all my scripts at once which seems adequate for my needs. I may look into it further though on my next wp site.

@La Colonia @einomi @Friebel It's not an Uglify issue. It's the create-react-app being really strict. There is a line of ES6 code in TweenLite that is causing the build to bailout, and we'll get that fixed. Note that GSAP is now at version 2.0.0. There's also some new documentation about using npm. https://greensock.com/docs/NPMUsage To get the smallest build possible, I would follow this format for now. Import what you need from "gsap/all", and then put everything you import inside an array so it doesn't get dropped by tree shaking. import { TweenMax, TimelineMax, AttrPlugin, CSSPlugin, Bounce } from "gsap/all"; const activated = [ TweenMax, TimelineMax, AttrPlugin, CSSPlugin, Bounce ]; That will create a bundle that should look like this. Notice how it imports the TweenMaxBase module, which doesn't include any include plugins. @GreenSock this line of code needs to be changed again. And _gsScope should be defined just as window. Leaving _gsScope the way it is now will cause TweenLite to be excluded from the gsap bundle. It will still work, but it won't be optimized for production. export const {Ease, Linear, Power0, Power1, Power2, Power3, Power4, TweenPlugin} = _gsScope;

Hi @soupking I have a lot of posts about displacement mapping, mostly about PixiJS, but it works exactly the same in SVG. However, there is a bug in Chrome that prevents you from using an image for the map, so my demo here is broke. ? SVG documentation is really bad, but MDN does have a little info on <feDisplacementMap>. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap Look at the scale attribute. That controls how much displacement takes place.

Nice thread! I'm gonna read this one on my phone after work, lying in the park

You can do something like this, by using fake cursor. It will be a lot easier to control and to get smooth animation. I am using HTML but you can do same concept with PIXI.