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 .

I am just jumping here with some experience having a similar issue - Chrome was not respecting some of my direct transformations so I had to use css:{}. That solves Chrome problems but (it appears that) slows down Firefox. So test, test and test again. If you don't need CSS repositioning - avoid it. And we'll all have to wait for fixed version of Firefox that should match SVG animations in Chrome and Safari.

Thanks again. Luckily they said they will accept current script with cosmetic changes, not GreenSock related (we knew that, right? ). I'll post another comment when Firefox (team) fixes that. On to new TweenLite and TimeLine script. With an owl!

Thanks, Carl, encouraging as always. The problem is zooming in to double and triple scale: that you can try by changing scale in your pen to 2.0 (or 3.0). I guess we have to resolve this to Firefox bug. Even if I remove all those texts, lines and circles blurring the speed is the same so animating the whole chart is slow in FF. What about the idea of animating to viewbox (attribute of SVG tag) changed values etc?

No clue? Anybody? Is zooming few tens of SVG paths really so problematic in Firefox?

Hi, I've been working long on the chart for the client yet I cannot solve the slow Firefox zoom problem. Here's the limited version of the SVG chart that exibits the problem: http://codepen.io/mattsrinc/pen/mJMRMX Now please try to click on the light blue areas (of the cow drawing shown). The neck and the part at the top are set to be zoomed (scale-d) two times while the bottom parts are set to zoom to three times larger. The (zoom) animation is slow and unusable on Firefox (when other parts are added, even in this limited version the slowness is noticable). Safari and Google Chrome are great - testing all this on MacBook Pro, Windows experience is similar. Because of the shaking text animations I have already scripted timelines to have text appear after the zoom ends. Is that because of the (known) scaling bug in the Firefox? I've tested different tricks mentioned in the forum (rotate by 0.01, z etc) yet it doesn't help. When I have explained the issue to the client I thought about simple changing the viewbox of the SVG e.g. having a final view a zoom by using SVG attributes and GreenSock somehow animated the tween (if it would not call scale command implementation). Dear community members, is there any workaround to get same fast animation like in Chrome and Safari? And no, no Flash please - never scripted it.

Thank you, Rodrigo, powerful examples indeed. I'll try first with simple 2D synchronized operations - after all it's just simple travelling of two image corners over x and y while revealing the second image. If I fail with that, I'll try with z-axis math. I promise I'll post at least an algorithm back.

Simple question: the effects are great (thanks) for mimic the cube transitions watching from outside. What to change to achieve transition for surfaces which are painted inside the cube? E.g. maybe simplest (display biased) way would be change viewing point or screen projection plane to be inside the cube but GreenSock is not OpenGL etc. Maybe just little z-trick (negated values) would do?