Skip to main content
Inspiring
April 26, 2018
Answered

ScaleTo animation limits

  • April 26, 2018
  • 4 replies
  • 405 views

I'm trying to get a rectangle shape to enter a slide at 4 pixels wide and then scale to 1000 pixels wide.  The ScaleX parameter only goes up to 100 with the result of 400 pixel width at the end.  I tried entering 250 but it stops at 100.  Is there any other way to do this?

    This topic has been closed for replies.
    Correct answer Jeremy Shimmerman

    I'm not a huge fan of using Captivate's built in animation because I find it a bit limiting.  Another solution is to use javascript / css.  If you run this code you should be able to scale your rectangle.  Make sure you give the rectangle the id 'myRectangle' and keep the 'c' in the code.  You can change the duration of the animation by modifying the duration number (which is in milliseconds)

     A 4 pixel wide rectangle would need to be multiplied by 250 to get it to 1000, so I think this should work. 

    myRectanglec.animate([

      { 

        transform: 'scaleY(1) scale (1)'

      },

      { 

        transform: 'scaleY(250) scale (250)'

      }

    ], {duration: 1000, fill: 'forwards'});

     

    In the future you can change things like easing, opacity, colour, rotation, and position.  

    4 replies

    Inspiring
    May 1, 2018

    This is great.  Where can I find more information on using javascript/CSS for animations in Captivate?

    Jeremy Shimmerman
    Jeremy ShimmermanCorrect answer
    Participating Frequently
    April 27, 2018

    I'm not a huge fan of using Captivate's built in animation because I find it a bit limiting.  Another solution is to use javascript / css.  If you run this code you should be able to scale your rectangle.  Make sure you give the rectangle the id 'myRectangle' and keep the 'c' in the code.  You can change the duration of the animation by modifying the duration number (which is in milliseconds)

     A 4 pixel wide rectangle would need to be multiplied by 250 to get it to 1000, so I think this should work. 

    myRectanglec.animate([

      { 

        transform: 'scaleY(1) scale (1)'

      },

      { 

        transform: 'scaleY(250) scale (250)'

      }

    ], {duration: 1000, fill: 'forwards'});

     

    In the future you can change things like easing, opacity, colour, rotation, and position.  

    Lilybiri
    Legend
    April 27, 2018

    You can build a sequence of several scale effects.

    sabre123
    Participating Frequently
    April 26, 2018

    Not knowing exactly how the slide plays out, or how you have the 4px shape at the beginning, have you tried creating the 1000 px rectangle and then using Entrance>FadedZoomIn? You can start it at 1% or whatever and it will end at 1000px. You can set the Initial Alpha to 100 if you don't want the fade.