MapBox and GSAP

[Peter K]

Hi 
can anyone tell me if GSAP can hook into MapBox?

Specifically, I am looking if possible to...

1. Draw a line between two points with MapBox 
2. Animate a circle running along the line between those points

MapBox uses a canvas element so it's difficult to inspect via Chrome and kick some tyres. 
Thanks

[Cassie]

Hey there!

 

So GSAP can animate pretty much anything *animatable* - by that I mean properties of JavaScript objects that are able to change gradually from one value to another, like numbers or percentages. Boolean values true/false or strings aren't animatable (unless GSAP's done some magic internally, which it has for a lot of CSS properties)

So in terms of whether you can animate mapbox stuff with GSAP, the question becomes more

 

"Can I draw a line with mapbox"
"Can I access the properties of that line"
"Does that line have a width/length/or similar property that would allow me to expand the length of it like it's drawing"

 

I took a look in their docs and it seems like you can use a custom animated canvas, so this looks likely

https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-route/

 

In order to animate canvas with GSAP you'd just need to find the name of the property you want to animate, work our the values and then update the draw function of the canvas on each tick of the animation.

 

Like so

See the Pen XWENapb by GreenSock (@GreenSock) on CodePen

or in your case... (minus the canvas draw as I'm just animating a proxy object)

See the Pen ExJZEpo?editors=0011 by GreenSock (@GreenSock) on CodePen

 

Hope this helps!

[Peter K]

Thanks Cassie

Appreciate the reply and info. 👍