mattsrinc

Yeah, thanks - when time permits (I remember I have tried it with GSAP 3 - some commented code is left in - yet went to working code to submit entry on time). BTW has anyone noticed both formula cars go left and right to middle track path (using slight pixel translation in sub-timelines)? It works much more naturally then only following the path.

Hi to all, Formula 1 2021 season will soon start so I've thought it would be nice to share my animation. It was for a contest and I still believe it was the best but the client is always right (only when he's not ? - remember Steve Jobs?). Undercutting in F1 is going to pit earlier, do some fast laps (with fresh tyres - filling a fuel not an action here) and get in front of the car previously leading. Maybe the text caption for driving fast lap(s) would be good to add (you can see in the code the red car is driving faster after a pit stop). I would love to see the code updated to GSAP 3 if anyone has time to do it - I haven't succeeded in the zeitnot. And for real F1 fans here's the schedule for 2021 (I don't remember but maybe there are all tracks available as vector shapes somewhere on the web): https://www.formula1.com/en/racing/2021.html ?

? I would suggest these links next, thanks (was a late hour).

It's always good to check what features do you need (and what the chosen javascript library can provide). I posted a message about using D3.js built-in tween animation instead of hardening the task by using GSAP etc. Here you might go with Paper.js that will show you interactive handles for Bezier control points simply with setting a configuration parameter: path.fullySelected = true; The well-known example (quoted several time in GSAP forums) is easy to study: http://paperjs.org/examples/smoothing/ With Paper.js it's possible to create advanced animations on canvas. Here's an idea of an audio visualizer: https://www.dropbox.com/s/dvll53kvxe3r42v/audio-viz-fog-filter-mattsrinc.mp4?dl=0 I cannot reveal a source code (and the URL in the video is not valid anymore) yet for sharing the knowledge here's a tip - with canvas you can draw a graphical element outside (e.g. translated) the visual display on screen yet translate its shadow (e.g. effect) back to screen coordinates. That's how the shadow filter was done for Paper.js repeated and delayed&animated paths for audio spectrum above.

As Jack has written a minimal demo would be nice. And also for javascript video players (built-in a browser or custom) all of their methods are guaranteed to work only if the video is loaded fully or up to the required position. You can get that information from HTML5 Video API (or I would strongly suggest to use VideoJS open source player, best IMHO). For more javascript video player information you should probably look in other forums, like here: https://stackoverflow.com/questions/18266437/html5-video-currenttime-not-setting-properly-on-iphone

I know this is a late comment to this topic and I would give my hand for defending GSAP animation features when comparing to other libraries but ... whenever there is a built-in feature of a main given javascript library for a solution I try to use it and not adding additional libraries when not needed. So instead of calling GSAP you can play with transition and delay parameters in D3.js, essentially giving you the sequenced stagger animation like GSAP. I don't have time to rework your example (doing at least 2 D3.js charts/month per clients) yet this should guide you to pure D3.js approach: https://www.d3-graph-gallery.com/graph/barplot_animation_start.html Of course for more advanced animation you can always later add/switch to GSAP. ?

I just like GreenSock because it has everything I need for web animations in a clear, cross-browser and performant API.

As PointC said - it's a waste of resources (read browser's memory) to create new timeline every time you call a function. Just create your timelines *calling* the function once and then control each timeline calling its functions, not calling a timeline creation function again. Modified CodePen: https://codepen.io/mattsrinc/pen/ZqYeRv Do note that you can change the z-order of objects in DOM very easy but SVG (if you will use it) doesn't have third dimension and an object that resides in a file the last will get drawn above all other. Usually this is solved by recreating the object again (removing and adding it), some javascript libraries have "put on top" commands for that.

Have you resolved this? The solution is quite simple. You are already tracking mouse coordinates so just setting transformOrigin attribute in the mouseOut handler to be the center of the circle probably does what you wish. I do get strange resizing circle effect that other might fix though (Firefox 61.0.2 on Mac OS).

Hi, supporting the new forum (I might post an offer to work, too). Regarding this part of the posting guidelines for freelancers: GreenSock is not liable for anything that happens before, after, or during the life of your project. Please don’t contact us for arbitration help. It’s fine if you want to simply report abuse. I would change the second statement to: Please don’t contact us for arbitration help - several freelancing portals offer so-called "dispute resolution services" that are recommended for potential arbitration. (with no green, just in the mood ) It's a simple addition that kills two flies at once: It emphasizes that GreenSock staff will not do any arbitration if an employer and/or freelancer fail to do their part of an agreement. It educates all parties to use the third person - freelancing portal - for (also any potential arbitration of) the first project to establish the mutual trust before possibly directly communicating and working together in the future. What do you think? I did only one first project with a new client using direct payment over PayPal, deliver the work and got paid - but a client objected, requested a refund and PayPal delivers that almost immediately with no arbitration. And client kept my work ... I'm working over Freelancer (for 14+ years, back from RentACoder) and Upwork (from Elance) so can further help with any questions regarding these two portals. And I'm really grateful for the excellent GreenSock libraries. BTW Upwork (US-based portal) gets more jobs monthly than Freelancer (Australia based portal yet biggest in the world) that mention GreenSock or GSAP as a requirement or "good skill to have". The number is still small though growing - the anticipation IMHO is to get more experienced GSAP developers on this forum compared to general outsourcing portals.

Damn, you're right as always. I forgot the transformOrigin: "center" part. Many thanks, you saved my day!

Thanks but If that would work I would not even ask here. Offsets removed, transform origin set to 50% 50% (and arc based path3 added): So the problem is (probably only) in getting the moving object "centered"? That's what I'm seeking e.g. how to move any (compound) path or a group on a path, centered on it and auto rotate as well. ADDED: But it might work. I've commented out TweenLite.set("#car1", {xPercent:-50, yPercent:-50}); and if all I need to do is extend the rectangle for few pixels more that's a pretty acceptable solution, thanks!

Hi, fellow GreenSock (forum) members. I'm stuck with animating an object over path, more like generally how to center say rectangle or any path to move smoothly on a path with autorotating. The Codepen pen is a part from what I would like to do but can't center the green "car" e.g. so that its center (midpoint X and Y or centroid if you wish) would move on the path. This year I have created complex animation of a cube moving along the "infinite" path with calculating shadows per rotation angle - with callback function - yet cannot do this simple animation well. Gray path is a rectangle, red one is nearly completed rounded rectangle with Bezier curves. The latter would be perfect but I cannot script the green rectangle to be centered on path at all times. So in general how to draw, position and/or offset an object so that it will move along the path by its center (centroid)? Having a group with invisible rectangle boundaries and then animating a group along the path? And yes, I have watched the excellent Note: I'm using svg.js for some easy creation of SVG elements. Intention is to script all to have rule base path creation and then animating objects over paths. Sure, the path rounded corners will be redone with arc commands :-).

On the topic, how likely is that GreenSock would be able to animate this simulation smoothly: http://david.li/waves/ It uses OpenGL (WebGL) so real 3D animation as a scripting solution, looks very similar to Three.js (library and) code. It's still remarkable every time I watch it again. Is there similar GreenSock animation anywhere?

Thanks Diaco for the onUpdate example. It has solved my limiting DIV scale setting on mousewheel event as well. For the community benefit - mousewheel up e.g. zoom in event won't trigger or triggers as mousewheel down (zoom out) event in Chrome and Safari on Mac. So you end up with zooming out only on those browsers (August 2016). This jQuery plugin solves the issue completely: https://cdnjs.com/libraries/jquery-mousewheel with a mousewheel event on the div element (see Diaco's first CodePen example) usable like this: $("#proxytrigger").on('mousewheel DOMMouseScroll', function(event) { event.preventDefault(); //console.log(event.deltaX, event.deltaY, event.deltaFactor); if (event.deltaY < 0) { // scroll down TweenLite.to(chart_div, 0.5, { scale: "-=0.5", ease:Linear.none, onUpdate:limits }); } else { // scroll up TweenLite.to(chart_div, 0.5, { scale: "+=0.5", ease:Linear.none, onUpdate:limits }); } }); For more context this was used to add 3D rotation with dragging and zooming to Google (Charts) organizational chart. The chart is SVG so using GreenSock is the perfect combination! Firefox (at least on Mac) requires preventing default event or it will trigger twice making zoom unusable. UPDATE: really need to share one of the possibilities (with the image background on the web page). Image below .