Leaderboard

A complicated shape where you can drag along the x and y axis would probably require finding the closest point on a curve. http://phrogz.net/svg/closest-point-on-bezier.html That's based on this SO answer. https://stackoverflow.com/a/44993719/2760155 Definitely not an easy task. For dragging along a single axis, this thread might be of help.

I can reproduce the problem, but it's not a Draggable issue. Always use PointerEvents when available. IE and Edge do not not have touch events, and never will. And you need to add touch-action to your CSS. This article does a really good job of showing how to work with touch. https://developers.google.com/web/fundamentals/design-and-ux/input/touch/ With PointerEvents and touch-action on the trigger...

Hi @radiohead To calculate the difference between two shapes, Clipper might work better than comparing pixel data. Well, it should at least be faster, and work in IE. https://sourceforge.net/projects/jsclipper/ http://jsclipper.sourceforge.net/6.4.2.2/main_demo.html If you want to take that to the next level, gesture recognition might be another possibility. $1 recognition is probably the most basic/common. http://depts.washington.edu/madlab/proj/dollar/index.html Then you have machine learning, like with Google's Quick Draw game. I think that is using Paper.js, which can also do boolean operations like Clipper. https://quickdraw.withgoogle.com/ https://github.com/googlecreativelab/quickdraw-dataset

Another easy solution is to nest your element inside another element. This will allow you to easily animate the radius, i.e. the size of the circle. I added a background color to make it easier to see. For a delay with the bezier, that requires a little work. We need to move it into its starting position and rotation, so you could do something like this.

Hi @felek You could mess with the transform origin. That's much easier to do with SVG. Here's one way to do circular motion using 2 animations with a sine ease. And here's a function that will calculate an ellipse based bezier for you.

Thanks Blake, I gave it a thought before calling it bug, in the end it wasn't.

Greetings I just converted my web game (link at bottom) over to GSAP using Draggable, TweenMax and TimelineMax! I launched the site over 10 years ago, built on YUI2. About 6 months ago I decided it was time to drag it into the modern age, so I set upon a total front end re-write, this time basing all animations and drag/drop on GSAP! I deployed the update 2 weeks ago. Since then about 1 million unique users have spent over 10.9 million hours playing. Not a single GSAP bug or issue has come up! GSAP has been ROCK SOLID. WOOT! I just wanted to THANK YOU for making an amazing product that's allowed me to do this massive re-write and launch without having to worry about the animation/dragging aspects. Thanks again! PS: The new GSAP based website is https://worldofsolitaire.com The old YUI2 version is here: http://legacy.worldofsolitaire.com

Hi, To be honest, I just wanted to try different easings and a countdown. But with a little story it was really funny ... Kind regards Mikel By the way: GSDevTools is very helpful. I noticed, however, that in reverse, the centering of the object (pathDataToBezier) is not interpreted expected. Is that due to my coding?

Wow! I never heard of Vertigo, but just watched the intro. That's pretty impressive considering it's age. And the use of a gun firing computer is really interesting. I did artillery in the US army for a couple of years, which involved using a more advanced version of that. In addition to figuring out the direction/movement of a gun, the computers dealt with another animation concept, parallax movement. It's used to figure out how far away something is. https://en.wikipedia.org/wiki/Parallax#Artillery_gunfire

Hi @OSUblake, I only say VERTIGO ... "For the title sequence to Vertigo, Hitchcock had an additional, often unnoted, collaborator: John Whitney. A pioneer of computer animation who worked in television in the 50s and 60s and in the 70s created some of the first digital art, Whitney was hired to complete the seemingly impossible task of turning Bass’s complicated designs for Vertigo into moving pictures. A mechanism was needed that could plot the shapes that Bass wanted, which were based on graphs of parametric equations by 19th mathematician Jules Lissajous; plotting them precisely, as opposed to drawing them freehand, required that the motion of a pendulum be linked to motion of an animation stand, but no animation stand at the time could modulate continuous motion without its interior wiring becoming tangled. To solve this problem, Whitney made use of an enormous, obsolete military computer called the M5 gun director. The M5 was used during World War II to aim anti-aircraft cannons at moving targets. It took five men to operate it on the battlefield, each inputting one variable, such as the altitude of the incoming plane, its velocity, etc. Whitney realized that the gun director could rotate endlessly, and in perfect synchronization with the swinging of a pendulum. He placed his animation cels on the platform that held the gun director, and above it suspended a pendulum from the ceiling which held a pen that was connected to a 24-foot high pressurized paint reservoir. The movement of the pendulum in relation to the rotation of the gun director generated the spiral drawings used in Vertigo’s opening sequence. The M5 weighed 850 lbs and comprised 11,000 components, but its movement was dictated by the execution of mathematical equations; it was very much a computer. Whitney’s work on the opening sequence for Vertigo could be considered an early example of computer graphics in film—and a clever détournement of military equipment." (more here) Were you already active then? Kind regards Mikel

The one with the sine eases can result in some interesting movement by using different durations. You end up with a with something like a Lissajous curve.

Hi @Bartonsweb I'm not sure I understand what that is supposed to look like. Do you have a mockup? Canvas isn't the easiest thing to start with, especially if you're going to be dealing with nested rotations, but this thread has some good info.

This issue reminded me of https://noni.cmiscm.com/ Basically you draw a simple shape (using your mouse) and it will get matched to similar shapes. Try drawing a house or a car. If you click on the ? in footer you will see that it mentions google's QuickDraw which Blake referenced above.

This thread has several examples that might be worth checking out. I think there was another thread similar to it, but I can't find it at the moment.

Really nice! I was wondering how you were making out with the new version, but it looks like there are no card physics. Was that too much trouble to implement?

Hello @alessio and Welcome to the GreenSock Forum! You can find more info on transform-origin and CSS transforms here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms Happy Tweening

Hi alessio, Just use transformOrigin. TweenMax.fromTo('.test', 0.6, {scale: 1}, {scale: 1.1, repeat: -1, repeatDelay:0, yoyo: true, transformOrigin: 'center center'});

I'll definitely look into those. Now that you mention it, I do recall seeing the machine learning demos generate those weighted scores for its guesses. Never occurred to me that I could go that route. Thanks a ton OSUblake.

Hi @OSUblake, I like your simple solutions: clear, lean, effective. The right one is really tricky! Best regards Mikel

I played around with the physics for a bit, but couldn't get it to a point where it "felt" good to me. In the end I decided to punt on it and maybe try again in the future. Thanks to the helpful advice here from when I asked, I'm sure I can get it working nicely, but it's just a matter of me spending some time with it and honestly, it's not been a feature anyone has ever asked for, I just thought it might be cool to have, but I'm also wondering if some of the players would find it annoying

It working great ! That getBezier function is insane i would never write this Is there any wait to start animation after 2 second? When i add delay attrib it works but it moves my element to after delay place.

That's great news. Thanks for sharing. I just played a few games. Worked very well!

Due to bug I encountered with startDrag method in chrome's touch events, I have updated demo to use multiple triggers. UPDATE: Not a bug, check this thread.

Ohk previous demo was overly complex solution. Here is one final attempt. You should be able to write a plugin that will take different parameters like min-max height-width etc. To disable certain corners and edges, just hide them, simple. You can take parameters for that as well.

Hi @cheezheadsrule, Even if I do not know where to go (after click handler is unbinded). An exciting exercise ... Kind regards Mikel

If I understand correctly, here's the first draft to get you started.

Castigate should be investigate. Silly phone

I'm repositioning/scaling the shapes so that shouldn't be a problem, however, finding the correct shapeindex could be a headache since I'm actually comparing randomly drawn paths. Still, looping through and comparing anchor points sounds like its on the right track. I appreciate the insight. Here's my current codepen. Right now its just copying the svg to a canvas and doing an imagedata comparison. Again, not ideal, but maybe itll come in handy for someone else.

Thanks @OSUblake! Nice ES6 implementation.

Hi @alessio Welcome to the forum. You just need to add transformOrigin to your tween so the element scales from the middle like this: TweenMax.fromTo('.test', 0.6, {scale: 1}, {scale: 1.1, transformOrigin:"center center", repeat: -1, yoyo: true}); More info here: https://greensock.com/docs/Plugins/CSSPlugin#transformOrigin Hopefully that helps. Happy tweening and welcome aboard.

Hi @Anya Welcome to the forum. Looks like @GreenSock beat me to it, but I'll throw out my two cents for you. When I have several groups in which I want the child elements to stagger and they're all the same, I usually just use a loop. Not that it's any better than a reusable function -- just another option. Happy tweening and welcome aboard.

Sure, GSAP can do everything anime can do plus a lot more. And GSAP is faster too. It looks like the demo you provided leverages some other helper classes pretty heavily, and anime was only used for small portions. Here's a fork where I swapped in GSAP for the anime code: The structure of things seemed a bit convoluted so I may have missed something, but it appears to work just fine with my edits. Is that what you were looking for?

Hi @Raistlin That's a nice effect. Are you asking if that website uses GSAP or just how to make something like it in general? As far as I can tell, they're using CSS transitions. This would normally fall outside the scope of GSAP support, but coincidentally I'm in the middle of creating something quite similar for some interactive infographics so I'll show you what I'm doing. I'm using SVGs in my project, but you can do it with some plain old divs too. The secret is setting the origin point for the divs so they go around the circle correctly. That website is using a pretty big parent circle (3000px) so they set the origin point of the divs to the center of that circle (1500px) and then rotate them. The fade at the top and bottom is accomplished with an additional div over the top of everything with a gradient background image that's transparent in the middle. Here's a basic example of what you could do: I'm manually setting the start rotation of each box with a set() tween, but if you had a lot of elements, you could get them to their starting positions with a loop too. To get the infinite part to work, I simply set() the rotation of each box back to the beginning as it drops down out of view. I just use a simple counter to pick which box is set back to the beginning and when the counter reaches 1, I reset it back to 6. Again, the fade-out at the top and bottom is created with a gradient div over the top of everything. There would be other ways to approach this, but this is how I'd do it. Hopefully it gives you a starting point. Happy tweening and good luck with your project.

You and @Jonathan pretty much covered what I was going to post. Basically that SVG is downright crazy!!! I've never seen such a complicated SVG before. Graphically it doesn't look complicated, but it took Illustrator and Inkscape around 10 minutes to load it. What's weird is that you can draw it immediately to a canvas element without any problems or delays. 630kb is the file size. The size in memory will be MUCH higher than that. If your image is 3000 x 2500, and each pixel is 4 bytes... 3000 * 2500 * 4 => 30,000,000 => 30MB On a HiDPI display like a phone, your SVG would be even higher than that. If the device pixel ratio is 3, then the browser would be drawing your SVG at 9000 * 7500. 9000 * 7500 * 4 => 270,000,000 => 270MB!!! And now your phone is out of vram! You'll probably need to break your image up into smaller images, and only display what is visible with a little buffer around the edges. Pretty much the same thing that tile-based games do. https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps

Hi @HindBeast, I am not sure ... But something like this could look like a solution: Happy tweening! Mikel

I'd definitely echo @GreenSock's advice and convert that to a path. I've fought with many circle animations and that is the easiest approach. (You can also convert it to a path before exporting from your vector software if you like.) I started a thread last year about SVG circle fun in the various browsers. It may be of interest to you. Happy tweening.

If you remove all her JavaScript, you can see that her design is responsive anyway. Most probably you are creating logo using SVG which is vector graphics and is responsive by default. It will be best if you post a simple codepen demo showing your problem and expected behavior.

Wow. Thanks very much. I've gone over your solution multiple times now and I'm finally beginning to understand it. Your code is always so concise and clean. I really appreciate the clarification. Thanks!

I see @OSUblake is about to respond so I'm sure he will have some great insight. As Jonathan said, that SVG is insanely complex. I saw 1500 classes defined and what looked like hundreds of gradients and paths. I tried pasting the raw html source of the svg into CodePen and my browser locked up and the fans went nuts (i suspect CodePen was choking trying to apply the syntax highlighting). I did a quick screen capture of the svg at around 1500 x 1500 and my busted up iPhone6 running iOS8 had no problem with the image of that size. Quick test using a png: https://s.codepen.io/GreenSock/debug/eyEWyw This is definitely appears to be a case of a complex SVG sucking too many resources to render and update. I wish I had better news for you.

@Tebbott Your SVG is like 4.64mb. That is a very huge asset to be pulling in the page via an <img> tag. You might have to mess with the SVG viewport attribute, to reduce the perceived size to the browser to render. But again that is a HUGE SVG that your pulling in the page with many assets inside that SVG. iOS has a very limited memory to render your asset based on the memory usage for iOS devices. Android probably has very different memory requirement than iOS. It seems to be since your using an SVG instead of an actual image via the <img> tag. You should or could convert to an actual image, and you wont see that type of behavior in iOS, but still even a 4.64 image would do the same thing. Maybe slightly better but still, that is a lot of memory your asking to render and load. The 2-3 seconds to respond due to the high memory it takes to render the SVG when delivered in a <img> tag. See the following which goes over the spec regarding memory usage for SVG and limits in iOS devices. https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html That limit is probably why even the SVG inside the <img> tag has that hesitation to load that huge SVG file, since it could be treated like a bitmap. But even if it isn't, that is way too big for memory usage in iOS.

Hello @Tebbott Thank you for reducing your example so we can see it. There will be differences between Android and iOS since both use different ports of webkit. So even though they both use webkit they have modified their own version of webkit to suit the needs of their different browsers (chrome and safari). That will mean that the CSS and JS can behave differently with various quirks and bugs.. or even different requirements to animate using transforms You might want to look at making it so the cars only animate when inside the viewport. That will cut down on the constant frame rate of animating elements that are not even in the viewport to be seen. So one way is to use vanilla JS and have a function that detects the viewport bounds like in this stackoverflow post https://stackoverflow.com/a/7557433/1203457 Or you can try and use the Intersection Observer API to detect the viewport bounds https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API https://pawelgrzybek.com/the-intersection-observer-api-explained/ Then you can simply pause() and play() your animation depending if your elements are in the viewport. Other than you might want to fork (copy) the codepen example you made and add a couple of the cars animating so we can see them animate in context to offer advice on how to optimize those tweens and or timelines. Thanks

You can do it like this.

You can do that by returning instance of timeline like in following demo, notice that it returns paused timeline. If you click the play button, animation only runs once. In your example every time you go to the section, you are calling function which triggers creation of new timeline and that plays by default. In my demo, you create only one instance and because your timeline's already becomes '1' on completion, the subsequent clicks don't trigger any animation. does that help?

Time is come. The new challenge is to convert all your platform to Swift. That's the futures. We developers are all waiting for it. It would be great! PLEASE.

Thanks for all the awesome insight Oliver, Discom and Somnablast. Its absolutely insane that it's still this complicated and that developers as experienced as Martya need to pull their hair out trying to get up to speed. How can these networks / platforms not all have simple sample ad templates that new developers can learn from and find easily? Sheesh.

Sincerely I'have tried almost every swift animation library out there. I really home Greensock decides to port to Swift, I know my company would buy it for sure, since we are 4 developers that really struggle with animations on Swift. *fingers crossed!*