atelierstudios

Great thanks for your help Carl that works perfectly

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

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

Thanks Carl... typical noob mistake... apologies for wasting your time... I would say (barring a few token noob errors like this) I have managed to get up and running with Green Sock within a couple of days with fairly limited JS knowledge so kudos to the team!

Thanks guys I knew it would be something simple and apologies for being the token noobie posting all my code... I appreciate I should have simplified the example, posted it in a rush and my SVG is so complex it would have taken ages! To confirm the FF problem was due to loading too many libraries... I should have read more of the documentation before diving straight in!! Once again thanks guys, great library and also great support community = recipe for success!

Hi Guys I have the same problem (NS_ERROR_FAILURE in Firefox with TweenMax and SVG) but no idea how to diagnose/fix this issue... see codepen below... can anyone help? The timeline doesn't play, I can see something running in the web console? http://codepen.io/iamaandy/pen/dXYZBY

Sorry I edited the pen but forgot to save it!!!!! http://codepen.io/iamaandy/pen/dXYZBY Apologies Also sorry I have noticed none of the animations play in Firefox.. any ideas?

Hi Firstly I just wanted to say I have found GSAP extremely easy to pick up as a complete noob and with limited JS knowledge. Down to business... I have an animation (see codepen attached) with multiple time lines, this is a relatively simple stepped animation where user clicks on step 1 and it plays step 1 etc etc. There are 3 types of animation which I have called, spin, pulse and laser which I have reused throughout the timelines on various different elements which I have selected via class name. All animations seem to be able to be reused except the spin animation that I have included on step 5 in a nested timeline. If you first click on Step one and run the spin animations and then click Step 5 it plays the spin (rotation:360) elements fine on the items that haven't been animated yet but the items that were previously animated in step 1 will not rotate. I'm sure this is something simple and apologies for posting what is probably a really dumb question, I think I might need to reset the first animation.