barrymul

Hi all, Fairly new to the whole javascript tweening animation business. I've included a fairly complex svg file in a website I'm working on via an <object> tag and am using GSAP to animate it. //GSAP tweening/animation STUFF $(document).ready(function(){ var svg = document.getElementById("homeAnimation"); var svgDoc = svg.contentDocument; var homeSwitch = svgDoc.getElementById("homeSwitch"), homeSmallGear = svgDoc.getElementById('homeSmallGear'), homeBigCog = svgDoc.getElementById('homeBigCog'), homePipeBall1 = svgDoc.getElementById('homePipeBall1'), homePipeBall2 = svgDoc.getElementById('homePipeBall2'), homePipeBall3 = svgDoc.getElementById('homePipeBall3'), homePipeBall4 = svgDoc.getElementById('homePipeBall4'), homeBeltGearLeft = svgDoc.getElementById('homeBeltGearLeft'), homeBeltGearRight = svgDoc.getElementById('homeBeltGearRight'), homeChart = svgDoc.getElementById('homeChart'), phoneChart = svgDoc.getElementById('phoneChart'), phonePie = svgDoc.getElementById('phonePie'); var tmax_home_switch = new TimelineMax(); //Switch has separate timeline so it can pause the animation but still move. var tmax_home_chart = new TimelineMax({repeat:-1}); //Chart has separate timeline so it can repeat. var tmax_options = { }; //options config goes here var tmax_home_tl = new TimelineMax(tmax_options); //timeline takes options input and is declared var tmax_repeat_options = { }; //options config goes here var tmax_home_t2 = new TimelineMax( tmax_repeat_options); //timeline takes options input and is declared //Clear the stage tmax_home_tl.set([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], {opacity:0}); tmax_home_tl.set(homeChart, {x:-20}); tmax_home_tl.set(phoneChart, {scale:0, transformOrigin: "center center"}); tmax_home_tl.set(phonePie, {scale:0, transformOrigin: "center center"}); //starts off paused tmax_home_tl.pause(); tmax_home_t2.pause(); tmax_home_chart.pause(); // mouseover cursor change. homeSwitch.addEventListener("mouseover", funcover, false); function funcover() { homeSwitch.style.cursor = "pointer"; } homeSwitch.addEventListener("click", function() { tmax_home_switch.to(homeSwitch, 0.2, { rotation: 60, repeat:0, delay:0.2, transformOrigin: "center center"}) .to(homeSwitch, 0.1, { rotation: 0, repeat:0, delay:0, transformOrigin: "center center"}); tmax_home_tl.paused(!tmax_home_tl.paused()); tmax_home_t2.paused(!tmax_home_t2.paused()); tmax_home_chart.paused(!tmax_home_chart.paused()); if(tmax_home_tl.set([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], {opacity:1})) { TweenMax.set([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], {opacity:0}); } }); tmax_home_chart.to(homeChart, 0.25, { x:50, transformOrigin: "center center"}, 8) .to(homeChart, 0.5, { y:26, transformOrigin: "center center"}) .to(homeChart, 20, { x:500, transformOrigin: "center center"}); tmax_home_tl.staggerTo([homePipeBall1, homePipeBall2, homePipeBall3, homePipeBall4], 0.5, { opacity:1 }, 3.4) .staggerTo([phoneChart, phonePie], 0.5, { scale:1, transformOrigin: "center center"}, 0.5); tmax_home_t2.to(homeSmallGear, 4, { rotation: 360, repeat:-1, ease: Power0.easeNone, transformOrigin: "center center"}, "cogs") .to(homeBigCog, 8, { rotation: 360, repeat:-1, ease: Power0.easeNone, transformOrigin: "center center"}, "cogs") .to([homeBeltGearLeft, homeBeltGearRight], 8, { rotation: 360, repeat:-1, ease: Power0.easeNone, transformOrigin: "center center"}, "cogs+=4"); }); There is the code all the elements being selected are definitely in the SVG file that is being imported. It seems to randomly work and other times not. Any suggestions? I'm getting a "Uncaught Cannot tween a null target." in Chrome but it works fine in Firefox and sometimes IE. Here is the bones of the site: http://www.mulrooneydesign.com/apps/infov4/ I'm guessing that the GSAP code is firing before the SVG DOM is instantiated any way to avoid this happening? Also any critique of my code generally is more than welcome. B

Thank you! That was driving me crazy! I'm using GreenSock for all the animation but yes I realize this was more of a general SVG question so thanks for the reply.

Hi all, Very new to SVG editing and GSAP in general so please excuse this very newbie question. I've searched the forums but haven't found a simple answer to my question.. Which is: How do I centre the text in this circle in firefox. It's aligned prefectly in other browsers. Please help!! Kind regards B