The example animation app is a bit much to start off with.

Can someone provide a simple walkthru on say how to slide a panel width by clicking a button.

For example. I am trying to animate the sliding in of a scroller area that is off the screen or set pretty small to start, and animates by sliding the sider area when the user hits a button.

I know EWB has the power, but at times there is not enough info on how to use it and this adds lots of time to the learning curve.

Thanks in advance.

<< Can someone provide a simple walkthru on say how to slide a panel width by clicking a button.

For example. I am trying to animate the sliding in of a scroller area that is off the screen or set pretty small to start, and animates by sliding the sider area when the user hits a button. >>

You have to remember that the animation functionality is comprised of animation *primitives*.  It is, by definition, low-level at this point.  That's why the animation example project shows the "building up" of animations.

Here's how you would slide a control that is initially set at design-time as Visible=False, with a Layout.Position of lpTopLeft and a Layout.Stretch of lsBottom:

procedure SlideControl(AControl: TControl; AStyle: TAnimationStyle; ADuration: Integer);
var
  TempPosition: TLayoutPosition;
begin
  with AControl do
     begin
     BeginUpdate;
     try
        TempPosition:=Layout.Position; // Save the current layout position
        DefineLayout; // Peg the defined dimensions of the control based upon the current layout
        Visible:=False;
        Layout.Position:=lpNone;
        Animations.Left.Style:=asNone;
        Left:=-Width; // Move the control to the left of the container control
     finally
        EndUpdate; // Render
     end;
     BeginUpdate;
     try
        Visible:=True; // Make visible first
        Animations.Left.Style:=AStyle;
        Animations.Left.Duration:=ADuration;
        Layout.Position:=TempPosition; // Set the layout to the saved layout
     finally
        EndUpdate; // Render (with animation)
     end;
     end;
end;

procedure TForm1.Button1Click(Sender: TObject);
begin
  SlideControl(BasicPanel1,asBounceEaseOut,500);
end;

Tim Young
Elevate Software
www.elevatesoft.com

Tim:
Lovely! Thanks for the example.

Two quick questions:

(1) the settings on the Form Property page, just run at Load time only?
and
(2) the example slides in from the Left of the screen. Can animations also slide in from the right of the screen?

<< (1) the settings on the Form Property page, just run at Load time only? >>

No, any animation settings apply to *any* changes to the corresponding property.  So, if you have a Left animation, then it will be applied any time the Left property changes.  This is subject to BeginUpdate/EndUpdate blocks, of course, which allow you to control when the animations actually render.

<< 2) the example slides in from the Left of the screen. Can animations also slide in from the right of the screen? >>

Sure, just modify this line:

Left:=-Width; // Move the control to the left of the container control

so that it's this:

Left:=Parent.ClientWidth; // Move the control to the right of the container control

This assumes that your control's Layout properties are already set so that the control is pegged to the right of the container control.

Tim Young
Elevate Software
www.elevatesoft.com

<< No, any animation settings apply to *any* changes to the corresponding property.  So, if you have a Left animation, then it will be applied any time the Left property changes.  This is subject to BeginUpdate/EndUpdate blocks, of course, which allow you to control when the animations actually render. >>

Ah! Got it. Added another panel and animated it be adding:

BeginUpdate;
BasicPanel2.Left := BasicPanel2.Left + 600;
EndUpdate;


<< Left:=Parent.ClientWidth; // Move the control to the right of the container control >>

Got it. Works perfectly. Thanks.


Naturally, that has led another question

(1) Taking a term from CSS, how is the z-index order set? It is only done via the 'Bring To Front' property?

<< (1) Taking a term from CSS, how is the z-index order set? It is only done via the 'Bring To Front' property? >>

The DisplayOrder property handles this:

http://www.elevatesoft.com/manual?action=viewprop&id=ewb2&comp=TControl&prop=DisplayOrder

Tim Young
Elevate Software
www.elevatesoft.com

<< This assumes that your control's Layout properties are already set so that the control is pegged to the right of the container control. >>

I have spent several hours trying to get the Slide from Right working but cannot. Here is a simple demo app of the code.

Can you point out what I missed.

Thanks.

<< I have spent several hours trying to get the Slide from Right working but cannot. Here is a simple demo app of the code.

Can you point out what I missed.  >>

You're missing the fact that EWB auto-focuses controls on forms, and when that occurs, the browser is going to automatically scroll to the focused control, regardless of whether you want it to or not.

To prevent this, either don't use forms for your slide-ins (use some type of panel instead), or use this code in your project's .wbp code:

project Project1;

contains functions, Unit1, Unit2;

uses WebForms, WebCtrls;

begin
  Application.Title := '';
  Application.LoadProgress := False;
  Application.AutoFocus:=False;   <<<<<<<<<  Add this !!!!
  Application.CreateForm(TForm1);
  Application.CreateForm(TForm2);
  Application.Run;
end.

AutoFocus is turned *off*, by default, for mobile environments, and *on*, by default, for desktop environments.

Tim Young
Elevate Software
www.elevatesoft.com

<<   Application.AutoFocus:=False;   <<<<<<<<<  Add this !!!! >>

Thanks Tim. That worked.