Search code examples
animationtextadobe-edge

Adobe Edge - Growing Circle Animation

I'm making a product site in Adobe Edge. I have a circle div that needs to grow in a span of, let's say, 2 seconds when mouseover. Then a text has to appear in it. When mouseout, the text must disappear and do the reverse animation back to normal size. The circle has also to grow from its center, not the top left corner. I'v been trying to do this for hours with jquery and css3 animations but failed to get a satisfying result.

Solution

  • This is very easy with edge animate.

    1. make your circle element.
    2. set a key frame at 00:00 on the timeline for the circles width and height.
    3. press Q (the transform tool) or select the icon at the top left of the screen just to the right of the arrow.
    4. The transform tool scales things based on the origin point, which is repositionable but is automatically in the center of the selected object.
    5. go to 02:00 on the timeline.
    6. resize your circle.
    7. set a keyframe for your text at 0 opacity.
    8. go forward on the timeline.
    9. set another keyframe for your text at 100% opacity.
    10. group the circle and text into a div.
    11. right click on that div and press 'convert to symbol'.
    12. go back to the stage by clicking 'stage' on the top left of the preview window.
    13. select the object that you want to use to trigger the animation.
    14. open the actions for that object.
    15. paste the following code into a mouseover event: var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").play();
    16. now make a mouseout event and paste this code: var mySymbolObject = sym.getSymbol("INSERT THE NAME OF YOUR SYMBOL").playReverse();

    now what should happen is that onMouseOver, the timeline for that symbol plays forward, and onMouseOut, the timeline for that symbol plays in reverse. This way, if the animation is half way through and they mouse out, it will reverse from where it's at back to the beginning.