Working with Animations

[jonniegr...@gmail.com]

This isn't really a criticism as such, but one of the things about working with GWD is that when you place objects in keyframes it generates properties for that particular keyframe only and works out the transitions coding between the 2 and transitions the changes in preview mode. It's like GWD is playing Spot the difference.

What this means though is that when you add new objects to the screen, instead of each new keyframe acting as a clean slate, you have to go back through the keyframes and edit the states of your divs and objects individually before you're ready to work on the next phase of your projects.

You also have to be very careful about where exactly you place objects. If you have a text object for example and you place it in the wrong place, before you even get to setting the right opacity setting.

This is probably and outlandish quesstion and may not be possible in CSS coding but would it be possible to have a situation in GWD where new divs and objects you create in keyframes aren't added to other keyframes in the timeline?

[Jonathan Reid]

Hi,

When you create animations with GWD, all the tool does is generate CSS @keyframe rules, with each keyframe in the Timeline corresponding to a % entry in the @keyframe rule.  The way CSS @keframe rules work is each % entry has a static set of properties, and the browser will automatically animate the differences between the entries.  So really it's the browser that's playing "spot the difference."

If you're working in the Quick Mode of the Timeline (the more visual mode, with the state of each keyframe represented as thumbnail snapshots of the stage in the Timeline), there are some limitations to the control you have, and we had to make some assumptions about how to handle different situations.

Have you tried working with Advanced Mode in the Timeline yet? It provides the finer control that you're looking for. In Advanced Mode the Timeline is more abstract--instead of visual thumbnails, there are just time markers on a time grid--but you have much finer control over animations.  The biggest difference is that each element has individual keyframes, independent from other elements. With this finer control you can easily add new elements and give them their own keyframes, without having to modify the keyframes of every other element.

Thanks for all your feedback, it has been very helpful.

Jon Reid (GWD team)

[jonniegr...@gmail.com]

Hi Jon, Thanks for your reply.

I have to admit, I have been using the quick mode mostly but I do recall facing the same "problems" on both. for example if I use the delay settings in an animation, the animation will of course delay and stay right there till it's time for its actions to kick in. Maybe I just need to put an opacity setting in there to begin with? But I think it's just a case learning to handle how it works. Too often I place objects on the stage to find them zooming all over the place when I preview them. :)

I find it fun to start on Quick mode, save a copy of my project and see what happens when I convert to advanced. But I'll definately move onto advanced more frequently as I become more and more familiar with GWD.

[Jonathan Reid]

We were hoping people would do just that: Start in Quick Mode, and then convert to Advanced to see what the result was.  We were also hoping people could use Code View to help them learn how CSS @keyframe rules are built too. It's cool to hear that you're doing what we were hoping. :)

The trick with CSS animations is to remember that there are two ways to specify the appearance of an element.  One is by the CSS rules applied to the element via classes (and other selectors), and the other is by the @keyframe rule applied to the element.

To illustrate this, imagine you have div in your HTML document.  You give that div a CSS class, and in the style sheet specify the following rules: top: 0px; left: 0px; width: 50px; height: 50px; background-color: #00f.  This will give you a blue 50px square in the top left corner of the document. 

Now imagine you create an @keyframe rule with two sections, 0% and 100%.  In the 0% section you specify top: 100px; left: 100px and in the 100% section you specify top: 200px; left: 200px;.  Any element that this @keyframe rule is applied to will animate its position from 100x100 to 200x200.

What happens, though, if we apply that @keyframe rule to our blue square and then start the animation?  The base class on the element specifies a position of 0x0, but the 0% section of the @keyframe rule specifies 100x100.  So when you apply the rule to the element and start the animation, you'll see the element jump from 0x0 to 100x100 and then animate smoothly to 200x200.  That makes sense, right?  If you altered your base class so that the position was at 100x100, you wouldn't see that jump--the element would already be in the correct place when the animation started.

Here's the trick: when you are manipulating elements within GWD, we actually apply the changes you specify to the selected element using the base CSS class.  If you have a keyframe selected, we ALSO record the changes in the % section associated with the selected keyframe rule.

To illustrate this, follow these steps:

1.  Create a new Blank HTML File.  For Animation Mode, select Quick.
2.  Using the tag tool, draw a div on stage.
3.  Give that div a background color using the Color Panel, and move it to the upper left corner of the stage.

At this point, the appearance of the element is controlled just by the base CSS class.  You can verify this by looking at Code View.

Now, add a keyframe by clicking on the + button in the Timeline.  You now have two thumbnails in the Timeline.  The first represents the 0% section in the @keyframe rule, and the second represents the 100% section in the @keyframe rule.  Any changes you make to the element will be recorded in the associated section, as you would expect. But we also need to show you your changes on the stage, and we use the base class to do that.  To illustrate this, follow this step:

1.  With the last keyframe selected, move the element to the lower right corner of the stage.

If you switch to Code View, you'll see that the left and top properties in the 100% keyframe now match the left and top properties of the base CSS class.  If you go back to Design View and press Play, you'll see the element visually leap from the lower right corner to the upper left corner, and then smoothly animate back. If you were to save the file and then view it in a browser, you'd see the same thing: a flash of the element in the lower right corner, followed by an animation from the upper left to the lower right.  That flash would be very brief (and even invisible) for a simple file like this, but for a more complex file, you might actually see it. And if you had specified a delay for the animation, you'd certainly see it.

Now follow these steps:

1.  Hit Stop to exit the animation preview if you haven't already.
2.  Select the first keyframe.
3.  Hit play.

By selecting the first keyframe of the element, you were able to set an initial condition for the element that matched its animation starting point.  If you saved at this point, you would not see that flash of the element being out of place.

If all of that makes sense, try following these steps as an experiment (this isn't a suggested workaround or anything, just an experiment to illustrate the point):

1.  Create a new Blank HTML file.  Choose Advanced as the Animation Mode.
2.  Using the Tag tool, draw a div on the stage. 
3.  Give the div a background color and position it in the upper left corner of the stage.
4.  In the timeline, right-click on the element's track at the t=3.0 sec time marker.  Choose Insert Keyframe.
5.  With the new keyframe selected move the div to the lower right corner of the stage to create an animation.
6.  Drag the t=0 sec keyframe to t=2.0 sec to create a delay.
7.  With the first keyframe still selected, use the Properties Inspector to change the Opacity of the element to 0.9.
8.  Select the last keyframe.  Use the Properties Inspector to change the Opacity of the element to 1.0.
9.  Click Play to verify that the animation is delayed by 2 seconds and moves as you specified. Exit preview mode.
10.  Deselect the element by clicking anywhere on the stage.
11.  Reselect the element.  Now the element is selected but none of its keyframes are selected, so any changes you make will affect just the base class.
12.  In the Properties Inspector, set the opacity of the element to 0.
13.  Click Play.

For 2 seconds, the element will be invisible, then at the 0% keyframe the opacity: 0.9 rule will hit and the animation will start, moving the element from the top left to the lower right.

Being able to affect the base class as well as the animation of an element is an important feature of CSS, but it can cause some strange situations.  Especially in a visual tool like GWD, which has many users that come from a somewhat different animation metaphor.  I'm sure you can imagine the lively discussions the team has had on this topic. :)

Jon Reid (GWD team)

[Jonnie Grieve]

Well Jon, you've given me a fair bit to do there haha.  I think I understand though and I'll look forward to trying these experiments out to confirm and if it helps me to get a handle on it.  At least now I understand why I used to see flashes of things before the animation began in earnest.

I'll let you know how I get on.  :-)

[Jonnie Grieve]

Well I've been through it all now.  I've certainly learned a lot now about how Timeline and tool interactions work.    I tried experimenting myself I found that the bass class automatically sorted itself to copy the position in the first keyframe. So I couldn't reproduce the effect of the original base class flashing up by myself so then I just followed your directions and finally understood why.

For anyone reading this thread, what Jon was saying that when you select the thumbnail keyframes in Quick mode, you reset the settings for the base class in CSS.  This is why when you click the 100% keyframe (the last keyframe) you see the Flash sometimes in your projects. Beginning to see the match in the settings.

So Now I'm getting it!! To put it in lamens terms, clicking the keyframes select a starting point for the animations  i.e changes the base class which is separate from the keyframes controlled CSS..

 It still takes a little bit of practice to perfect it it all, I found the text tool for example, a little harder to control, But I reiterate, start in quick mode and that will help you understand how Advanced mode is put together.  If you know how, the tool really is easy to use! 

Thanks Jon for taking the time put these clear instructions together  :)

[Emmanuel Ulloa]

Reading Jonathan's post I feel smarter already. Thanks for putting that toguether.