Jump to content
Search Community

Animate along a path and change sprite/SVG object

atelierstudios test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Guys

 

This is more of a theory based question than a working example, I wanted to get your opinion before I set out trying to animate this. 

 

See attached image of a basic demo of what I am trying to achieve, I have an isometric image (inline SVG) and I need to animate an object (van) along a path (the road). The van need to change to reflect the different perspective of the isometric image.

 

I was thing there would be two options,

 

1. Build separate animations for each section of the road (seems sliglty clunky)

2. Animate along path and try and change the image via changing a class on the object based a time limit?

 

It would interesting to get anyone elses opinions on how this could be achieved or if anyone has had similar experiences?

 

Thanks in advance

 

Andy

post-44548-0-21710000-1467732357_thumb.jpg

Link to comment
Share on other sites

Regarding whether or not you use an SVG path for plotting the coordinates or create a series of tweens in a timeline really depends on how comfortable you are with each method. Since you are  member, using MorphSVG and BezierPlugin will make it very easy to follow a complex path with many points. 

See: http://greensock.com/docs/#/HTML5/GSAP/Plugins/MorphSVGPlugin/pathDataToBezier/

 

However, putting a series of tweens in a timeline has an advantage though as it is VERY easy to tell when the image should change as it will be exactly where you add a new tween. 

var tl = new TimelineMax({repeat:5, repeatDelay:0.5});


tl.to(arrow, 1, {x:200})
  .set(arrow, {backgroundPosition:"-100px 0"})
  .to(arrow, 1, {y:200})
  .set(arrow, {backgroundPosition:"0 0"})
  .to(arrow, 1, {x:400})

http://codepen.io/GreenSock/pen/WxOYxo?editors=0010

 

And yes, you could change the backgroundPosition using a className as that might be easier to read like

 

tl.to(arrow, 1, {x:200})
  .set(arrow, {className:"arrow down"})
  .to(arrow, 1, {y:200})
  .set(arrow, {className:"arrow right"})
  .to(arrow, 1, {x:400})

http://codepen.io/GreenSock/pen/akwQWR?editors=0110

 

Not sure if there is any noticeable performance difference between two.

  • Like 2
Link to comment
Share on other sites

Thanks for your swift reply Carl and for the extremely useful demos... I've said it before but I'll say it again I love this forum!!

 

Excuse my ignorance when it comes to SVG if I remember correctly you can't target elements of an SVG e.g add class names to elements?

 

Is it semantically correct to add a div inside my inline SVG?

 

My original plan was to animate multiple SVG objects (the vans at different angle) along separate timelines enabling me to change the image and keep the van in the correct position in relation to the road. I should have explained that my SVG scales 100% of the page. My concern  with animating a div over the SVG would be does it keep the positioning relative to the underlying SVG when scaled up and down? I was thinking it would need to be inline to have the correct X & Y coordinates?

 

Thanks again for your excellent reply 

  • Like 1
Link to comment
Share on other sites

Sorry, I overlooked the important part that thing you are animating would be an SVG element.

 

What you can do is have each truck be it's own group inside a group like

<g id="trucks">
  <g id="truck1"></g>
  <g id="truck2"></g>
  <g id="truck3"></g>
  <g id="truck4"></g>
</g>

And then you just animate the #trucks group and when you get to those turns in the road you can just toggle the visibility of each child truck so that only one is visible. You could add / remove classes on each truck or just use a set() to toggle the css visibility of each truck.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...