Jump to content

Search the Community

Showing results for tags 'maps'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 2 results

  1. 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" },
  2. Hello in the given pen i want to achieve : 1) Only the elements inside the circle area to be visible with ease effect of gsap.i.e on increasing the radius they must appear onto screen via gsap and on decreasing similarly should disappear 2) the elements to appear or disappear should be draggable with the container as the max limit of circle. 3) the elements should be clickable. 4) the circle opacity should be reversed i.e right now it is rgba(0,0,0,0.8) inside the circle i want it to be outside the circle so as to give the selection effect waiting for help. Thank you