Can you put a picture of your stage so we can see what you are talking about?
better yet, here is deployed version
if you click on the feedback box, and drag your mouse all the way to the very top of the screen, you'll see that the box is being dragged, but at 400 pixels below where it should be
I'm sorry, the blog post was not helpful for this situation. The problem is that in AE you can animate "Top" and "Left", but you have no control over whether that becomes a transformX /Y or a change to the css top: left:. AE makes it's own mind up. It seems that once you somthing other than just move the item (eg rotate or scale) it decides to stop using top /left and combine it all into a single transform including x y and rot. AE does not let you choose to animate the css top: left: property and also add a css transform for rot.
nevertheless, I've found a working hack for now. when the drag starts, I add a class
and so the transform is erased and the drag works perfectly. The weird thing is that after I drop, I DO NOT remove the class. It stays for the remainder of the time. Now that I think about it, it makes sense, since the transform is none and the top: and left have been permanently modified by jquery-ui draggable.
If I still wanted to do any further animation after that, I imagine it would get very weird.
so anyway, ability to force x and y transformations to use top: left: instead of transform would be a key feature for a (near) future release.
1 person found this helpful
Hard to exactly understand what you want to do. Are yoju talking about the small shaking of the boxes at the beginning? this should not be a problem depending how it is done. If it is what you mean, I will try and modify my sample to have this start animation.
Did you check out my sample file? I do control where the droppable lands and I doublt an animation would change anything.
My other thought is that you could make your boxes symbols and do the animation inside the symbol instead if you are animating the draggable itself if that makes sense.
Thanks for your example. I downloaded it and reproduced the problem as follows
1. click on fruit6
2. double click the pin, and move it to .5 seconds.
3. move the fuit to the top right
So now you have a little entrance animation for your fruit, BUT IT WILL NOT WORK. As soon as you click on it, it will pop down to the bottom of the screen. This is not good.
Chrome 33 /Win7 (by the way, are you in a position to work directly with the developers?)
OK - I understand now. Let me try and find a solution.
Thanks for taking the time to understand this. As I mentioned there do seem to be some hacks to work around it, but drag and drop is a key thing and ensuring it works in a straight-forward way will be a great benefit to the Edge community.
Well, I have not found a good solution for this yet! It is pretty bad that any animation on the main timeline will throw everything off. I had a number of other user questions to answer since your post. I not only answer questions here but I also get a number of PM and I try to get to everyone as fast as I can considering my full time job, freelance and, well, just life! But this is something I am very interested in finding a good, practicle solution!
Otherwise another work around would be to have the animation into each draggables. then you could play that and not affect the draggable states of the symbols.
I understand. As far as the putting the animation in the symbol, that's clearly not optimal since it forces you to animate off the symbol stage, and thus not use clipping.And also, for re-usability, it makes much more sense for an entrance animation to happen at the main stage level.
But yes, there are several workarounds to allow people to get their projects done. I see 2 directions for a fix. One, to update Edge to allow you to force it to use position instead of transformation. Two, work with the jquery-ui team to update draggable to check for css transforms. Or I suppose a third could be to supply a "draggable patch" js file for Edge users.
So no solution to this right? With all the tutorials out there, and with the jquery at the heart of Edge Animate, it's just shocking that animating an object into place, then dragging it is not a workflow that was tested over and over again.
I realize it's not EA's "fault", but I do want them to realize it so EA can really reach it's full potential, especially for less code-savvy people.
Another solution is to use jQuery animation instead of the timeline animation. e.g.
I know this kind of defeats the purpose of using Edge but is a workaround. It seems to be similar to Flash in that if you combine code based tweens/positioning with timeline tweens things get messed up.
Might be an old thread, but I found the answer here:
"Hopefully, this was long ago answered. But, here is the non-technical. short answer for anyone else who encounters this issue. Select each symbol that will be animated (has keyframes anywhere in the timeline) and change its x,y position from px to % (setting it relative to its parent, or stage) -- in the propertes panel, positon and size submenu."