IC SunsetThe developerWorks Connections platform will be sunset on January 2, 2020. This forum will no longer be available unless an extension has been requested. More details available on our FAQ.
Topic
  • 2 replies
  • Latest Post - ‏2014-09-20T12:00:22Z by jitupkp
Sphinx44
Sphinx44
2 Posts

Pinned topic Using animation in an AJAX "slide" - is this possible?

‏2011-06-02T14:26:52Z |
Good morning! I'm new to AJAX, and currently designing an AJAX "slide" piece for a client's home page. Right now, it consists of jpegs that slide in from right to left when a user clicks a small navigation.

Is it possible to have an image animate once it has slid into place? For example: having new words appear on the slide, or some of the elements appear to move.

Someone casually suggested we try an animated gif for the sliding image, but I'm dubious for several reasons: image quality and timing control, for example. I also don't know if that would even work.

Is there a way to animate between certain images in an AJAX slide piece without adding to download size, perhaps dynamically fading between a series of images to give the impression of animation? Please be as specific as possible!

Thanks much in advance.

-Sphinx44
Updated on 2011-06-19T23:29:34Z at 2011-06-19T23:29:34Z by cbreckles
  • cbreckles
    cbreckles
    1 Post

    Re: Using animation in an AJAX "slide" - is this possible?

    ‏2011-06-19T23:29:34Z  
    Is it possible to have an image animate once it has slid into place?
    Yes! Check out Dojo Toolkit (www.dojotoolkit.org) animations:
    http://dojotoolkit.org/reference-guide/quickstart/Animation.html

    You decide what you want to animate. You can animate individual CSS properties such as positioning, size, etc. There are a bunch of pre-built animations to fade in/out, slide in/out, etc.

    You mention timing control. Dojo gives you control over this, and also lets you chain or combine effects.

    If you put it all together you can do crazy, cool things.
    Is there a way to animate between certain images in an AJAX slide piece without adding to download size, perhaps dynamically fading between a series of images to give the impression of animation?

    The decision is whether or not to use an Ajax / Javascript toolkit. In theory you can write just about anything yourself, and ship only the functionality you want, resulting in the smallest possible footprint. In practice, debugging cross-browser Javascript is intensive, especially the QA, even more so if this is public facing and you don't have control over the numerous browsers and versions that'll hit your site. Dojo's developers have implemented resolutions to corner cases you haven't thought of yet.

    In general, you probably do want to be using an Ajax toolkit like Dojo so you don't spend your precious time reinventing the wheel. If you concentrate your investment and commit to one toolkit, you assume it is always part of your payload, and will use it as part of your solutions every time you can.

    The "built" version of Dojo is fairly small and is a very good trade-off in exchange for the huge functionality it provides.

    Also, you might consider developing your components with animations as Dojo Dijits (their widget system), and once they are well tested, drop them on your page with a line of code or two. You can make a Dijit that does just about anything.

    If this project is using IBM software that already ships a version of Dojo on the page as many do, just make sure you know what version of Dojo is included and use that version of the documentation to assist you.
  • jitupkp
    jitupkp
    104 Posts

    Re: Using animation in an AJAX "slide" - is this possible?

    ‏2014-09-20T12:00:22Z  
    • cbreckles
    • ‏2011-06-19T23:29:34Z
    Is it possible to have an image animate once it has slid into place?
    Yes! Check out Dojo Toolkit (www.dojotoolkit.org) animations:
    http://dojotoolkit.org/reference-guide/quickstart/Animation.html

    You decide what you want to animate. You can animate individual CSS properties such as positioning, size, etc. There are a bunch of pre-built animations to fade in/out, slide in/out, etc.

    You mention timing control. Dojo gives you control over this, and also lets you chain or combine effects.

    If you put it all together you can do crazy, cool things.
    Is there a way to animate between certain images in an AJAX slide piece without adding to download size, perhaps dynamically fading between a series of images to give the impression of animation?

    The decision is whether or not to use an Ajax / Javascript toolkit. In theory you can write just about anything yourself, and ship only the functionality you want, resulting in the smallest possible footprint. In practice, debugging cross-browser Javascript is intensive, especially the QA, even more so if this is public facing and you don't have control over the numerous browsers and versions that'll hit your site. Dojo's developers have implemented resolutions to corner cases you haven't thought of yet.

    In general, you probably do want to be using an Ajax toolkit like Dojo so you don't spend your precious time reinventing the wheel. If you concentrate your investment and commit to one toolkit, you assume it is always part of your payload, and will use it as part of your solutions every time you can.

    The "built" version of Dojo is fairly small and is a very good trade-off in exchange for the huge functionality it provides.

    Also, you might consider developing your components with animations as Dojo Dijits (their widget system), and once they are well tested, drop them on your page with a line of code or two. You can make a Dijit that does just about anything.

    If this project is using IBM software that already ships a version of Dojo on the page as many do, just make sure you know what version of Dojo is included and use that version of the documentation to assist you.

    see more

    http://techgurulab.com/course/ajax-quiz-online/