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!