CarpeDiem

Thanks for your response Jack, I managed to figure it out. I nested a div inside a div, just like i would nest movie clips and accomplished what i needed to do!

I don't know if I can explain this correctly but I'll give it a try. There is something I routinely did in flash that i can't figure out how to do in html5/javascript. Let's say i have an image of a football and it is moving from point A to point B, it could even be moving along a curved path which I know how to do. BUT, as this football is moving from point A to B, i want it also to be rotating so it looks like it is sort of spinning as it hurls itself through the air. In flash. I accomplished this using a real hack solution. I just made an animated gif of said football and then moved it from point A to point B but there must be a better way. If this makes sense to anyone and you can help, I'd appreciate it.

I am using the morph SVG plug in to animate a PNG along a path that I drew in illustrator. I saved the SVG code as my path and the animation works okay EXCEPT i want the animation to happen in the reverse direction. Here is my path code: <svg width="800" height="800"> <path id="anim_path" class="st458" d="M353.7,27.4c0,0-262.6,1.6-264.2,87.4s165.4,169.7,165.4,169.7" fill="none" stroke="black"/> </svg> and here is the script: var tl = new TimelineMax({paused:true}); var bezierData = MorphSVGPlugin.pathDataToBezier("#anim_path"); tl.set("#chip", {autoAlpha:1, xPercent:-50, yPercent:-50}); tl.to("#chip", 1, {bezier: {values:bezierData, type:"cubic", autoRotate:90}, ease:Linear.easeNone, repeat:0, yoyo:false}); tl.play(); Any ideas as to what I did wrong.

Hi all and thanks for the suggestions. The jitteriness has lessened but now I am finding that as an image pans in Firefox, once it stops it has a slight blur. Anyone ever encounter this?

i am having trouble with a slow panning image and I've taken all the advice in this thread. Could it have anything to do with the way the image was saved for the web? The creatives I am working with also want the image to be "retina sized" (double the actual size). Any advice?

I am trying to take a png, or it could be an svg shape, see attached. I want this png to serve as a mask so that when it is rotated the image beneath it is being revealed. I used to do this all the time in flash and am not sure how to proceed in html5. any help will be greatly appreciated

HI there I am working on a banner and I have a panning image that is 420 pixels wide and 400 pixels high. The duration of the tween is 5 seconds. Any hints as to how to make the image pan smoothly, it is looking very jittery. here is my code: tt(image1,5, {left:0, ease:Power4.easeOut, force3D:false}) thanks in advance. I am being told I should use CSS @keyframes for the animation but I'd rather stick to greensock animation as it's what I am more comfortable with.

thank you so much PointC, that was really helpful

again, apologies, newbie here trying this. Is it possible to animate a png, gif or jpg along a path. I have had success with animating SVG elements along a path drawn in illustrator but don't know if the same path can have a png, gif or jpg travel along the path.

I am new at this so bear with me. When I exported the codepen sample and ran the animation the red circle animates as I saw on codpen BUT, when the page first opens, one quarter of the little red circle is visible in the top left corner. How can I fix this. I am doing something similar with a different path but have the problem of seeing the object first.

Carl I'm okay now with my sample file, it works fine on phones. But I have another question, can custom fonts be used?

thanks carl. i see that the code pen sample is indeed working and i am not having any trouble with my local file working in all desktop browsers but, when i put the folder with all the assets (the code pen example didn't include an image that i used) on a server and then try to access the link on my iPhone, i don't see the text animating the way i see it animating on desktop browsers. does this make any sense to you?

Hi there, I just edited the code pen and uploaded the SplitTest.js file. It is still not working in code pen. I no longer have the chrome problem but the animation is not working on my phone. I don't know what I'm doing wrong in code pen. As I said, this is my first try at using it

I am very new at using the Split Text utility. I was having fun with it and when i previewed my locally in browsers (Firefox, Safari and Chrome all was good. But when I uploaded the file to a server, the animation did not work in chrome. Also, the animation did not work on my iPhone. I provided a link to my first code pen but when I hit run, it isn't even working at all. I am using a local copy of the "SplitText.min.js" Can anyone help?

Carl's suggestion, plus a thread from another poster helped me out. Thanks all!

I was trying to figure out the same thing, so Thanks!

I am trying to understand how to use DRAW SVG and am having some success. BUT, for the life of me, I can't figure out why a simple animation of, for example, drawing the letter W, goes from right to left, instead of left to right. The animation looks great but it is drawing the wrong way. Does this make sense to anybody? Can anyone help?

HI there PointC and thanks for the advice. I just discovered that if you are creating your paths in illustrator that Firefox doesn't like if you use the "convert anchor point tool" If you draw a path without using that tool, my animation works across all browsers.

I am just starting to experiment with DrawSVG. I find that some paths that are created in illustrator and then when the code is copied to my HTML doc that the animation does not work in firefox. it works it all other browsers. does anybody else have this same problem?

I am having problems getting the SVG code when saving out SVG files from illustrator. I am not getting any paths. I tried replicating exactly the tutorial where a square morphs into a star. I set up my illustrator file with a background and a start sublayer and an end sublayer just like the tutorial but i got this code. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="250px" viewBox="0 0 300 250" style="enable-background:new 0 0 300 250;" xml:space="preserve"> <style type="text/css"> <![CDATA[ .st0{fill:#5FC3AD;} .st1{fill:none;stroke:#000000;stroke-miterlimit:10;} ]]> </style> <g id="background"> <rect width="300" height="250"/> </g> <g id="start"> <rect class="st0" width="300" height="250"/> </g> <g id="end"> <polygon class="st1" points="23,88 109.463,80.133 152,4.447 186.2,84.248 271.326,101.314 206,158.5 216.074,244.732 141.5,200.275 62.6,236.505 81.837,151.843 "/> </g> </svg> Might anyone know what I am doing wrong.

Hi There when i go to this page on your site: http://greensock.com/getting-started-as#basic there used to be an interactive demo so you could choose a tween and copy the code. I don't see that interactive demo any longer. What happened?