Search the Community

Hello community - my first post! I discovered GSAP on Friday, got it working a few days later...mind=blown! I'd be happy to supply a codepen but have more a general/best practices question. My stack: React, D3...or rather, react-simple-maps npm package to use D3's map projections...and of course GSAP! My project: I'm a new front-end developer, hired as a data visualization analyst, and my first project is to build an interactive map to show bookings. with hundreds of bookings to render, it would be 'data overload' and lousy UI with hundreds of markers across the US all at the same time... I started racking my brain to try and find a way to map these out over a timeline to stagger the bookings...enter GSAP! Question: The map shows (first) the location of the customer who made the booking, our client's location, and a line connecting the two. I have a data object with nested client and customer data, looks something like this below. In order to generate map markers for both the client and the customer, I have already used .map to go through each array and create the marker. I have staggered the animations, but at runtime, all customers are rendered one at a time...then all clients are rendered one at a time, followed by all lines. Surely there's a way to to use the key to go by each bookingId and render the customer unique to that ID, then the client, and then animate a line connecting the two before applying that same animation to the next booking? My janky code for the animations (first-timer over here, go easy on me! lol) - I know the best practice in React is to use createRef instead of classeNames - will migrate soon! Likely to move this to a separate animation.js file and call the functions later in componentDidMount(). Happy to send more code examples and thanks! componentDidMount() { bookingInterval(); //Animations with GSAP const tl = new TimelineLite(); tl.staggerFrom( ".custMarkers", 1, { y: 500, cycle: { x: [-500, 500] }, ease: Power1.easeOut, opacity: 0.1, scale: 10 }, 0.5 ) .staggerFrom( ".clientMarkers", 1, { cycle: { x: [-500, 500] }, y: 500, ease: Power1.easeOut, opacity: 0.1, scale: 7 }, 0.5 ) .staggerFrom( ".lineAmation", 2, { y: 500, x: -500, ease: Power1.easeOut, opacity: 0.1, scale: 7, rotation: 360 }, 0.5 ); } Data: { BookingId: 123456, client: { ZipCode: 55555, coordinates: [-80.6998, 28.3716], clientName: "name of the client", }, customer: { ZipCode: 11111, coordinates: [-122.3122, 47.5838], location: "city, state" }, CreatedAt: "timestamp string" },

First of all, I'm long time fan. Greensock is great! I've been using GSAP in one of my projects as a unified platform for animating both SVG and HTML. Up until recently, I'd been using Raphael as my SVG library. GSAP's RaphaelPlugin was a nice abstraction from the messy matrix math underlying transitions between transform states. I got spoiled using scaleX, scaleY, tx, ty, localPivot, etc. Recently, I switched fron Raphael to D3, both for the data-driven functionality but also for more direct access/control over my SVG elements. (D3 focuses on transformation of SVG, whereas Raphael introduces it's own, special representations.) The change has been refreshing, but I miss the added functionality of RaphaelPlugin--especially for times when I simply want to spin and scale SVG elements using transform without thinking about interpolation, etc. [i'm not exclusively making graphs, but also flying spaceships around, etc.] So I went back and looked at RaphaelPlugin, and it strikes me that you're very close to having a general purpose, library-agnostic SVG plug-in for GSAP. The very few Raphael-specific methods (e.g., matrix, bbox) in RaphaelPlugin are mirrored in the SVG spec (e.g., getCTM, getBBox). With a little hacking, I got a prototype (mostly) working fairly quickly. Is there any interest in the community for such a thing? Have GSAP staff thought about this?