1
00:00:05,280 --> 00:00:09,320
All right so since my favorite thing to do with a query is animation I want to go through a couple of

2
00:00:09,320 --> 00:00:11,560
different animation options here.

3
00:00:11,780 --> 00:00:16,040
You can kind of pick up from and hopefully once you kind of understand the basics of it you can apply

4
00:00:16,040 --> 00:00:19,640
to all different things and do all different things with it.

5
00:00:19,690 --> 00:00:22,010
It's just there's so many doors that this is going to open up.

6
00:00:22,010 --> 00:00:24,730
I'm going to go through a couple of different options here before we move on.

7
00:00:24,740 --> 00:00:28,300
So let's start out a new document.

8
00:00:28,310 --> 00:00:29,570
What men do is four different things.

9
00:00:29,570 --> 00:00:35,700
I want to create a button that says grow one this is move when this is bigger and one has as many things

10
00:00:35,700 --> 00:00:40,410
spread to four different things with these very basic animation options here.

11
00:00:40,880 --> 00:00:44,650
So within our script at the top here opens up the same it always does.

12
00:00:44,710 --> 00:00:50,780
I mean to create a new javascript Arjay create option if your dollar sign.

13
00:00:50,840 --> 00:00:57,020
Open Prendes open quotes and then we say the first one of a target is the first go down here and that's

14
00:00:57,020 --> 00:00:58,950
going to be an ID of growth.

15
00:00:58,970 --> 00:01:00,590
Keep it simple.

16
00:01:00,890 --> 00:01:04,000
FLATOW 1 put in there right now.

17
00:01:04,590 --> 00:01:07,200
Eco's girl.

18
00:01:07,400 --> 00:01:07,800
OK.

19
00:01:08,090 --> 00:01:16,710
So they grow here and do a event handler somewhere and say Click do something and when I do a function

20
00:01:18,000 --> 00:01:22,860
and then within a function they're going to open and close the set of friends in the open set of curly

21
00:01:22,860 --> 00:01:23,780
brackets.

22
00:01:23,880 --> 00:01:33,000
And here with them the function is we wanted to create a new J.A.G. option here and say dollar sign

23
00:01:33,000 --> 00:01:37,150
Prendes and point to us True's here.

24
00:01:37,280 --> 00:01:40,480
It's a text box which went.

25
00:01:40,500 --> 00:01:42,900
This text box area down here the ID.

26
00:01:43,180 --> 00:01:47,930
Let me put that pound sign in there is text box and we can do is one of animi.

27
00:01:47,940 --> 00:01:56,250
So this is A-G query options will see animate and what we do with that room do a click a function and

28
00:01:56,260 --> 00:01:57,730
opening the Prendes.

29
00:01:57,870 --> 00:02:00,260
All of the curly brackets.

30
00:02:00,260 --> 00:02:04,290
I can think of time want to kind of keep on one line here.

31
00:02:04,380 --> 00:02:09,000
So within those curly brackets would be easier to see if I do it this way.

32
00:02:09,000 --> 00:02:13,030
But then there want to write all the parameters they want for the animation.

33
00:02:13,110 --> 00:02:18,270
And we're kind of basically using CSSA are got to look slightly different but it's not like very similar

34
00:02:18,270 --> 00:02:19,440
at the same time.

35
00:02:19,560 --> 00:02:24,270
So animate them as open close curly brackets here just like it would with kind of like with the style

36
00:02:24,270 --> 00:02:33,500
sheet is a mess say the width and make this one engrosses they change the width to 500 pixels wine.

37
00:02:33,670 --> 00:02:39,580
But it is the one difference right there is that with J.Crew you need to put that in quotes there.

38
00:02:39,810 --> 00:02:46,050
And that I can still say how what the duration is and how fast or slow I want this to work so I can

39
00:02:46,050 --> 00:02:54,060
say over the course of two seconds or two thousand milliseconds I did make one error there won't change

40
00:02:54,060 --> 00:02:55,070
that right now.

41
00:02:55,080 --> 00:03:00,870
So after the quote you can and you close that bracket right there because that's the end of our style

42
00:03:01,310 --> 00:03:04,960
so to the curly brackets they come say you with the duration and the number.

43
00:03:05,070 --> 00:03:08,610
And when I go ahead and close that guy right there.

44
00:03:08,610 --> 00:03:16,110
So that is all that you need for the very first one here and I'm in the antique closing corner right

45
00:03:16,110 --> 00:03:16,860
there.

46
00:03:16,860 --> 00:03:22,590
So this actually should work right now although I haven't really added a style sheet to see how this

47
00:03:22,590 --> 00:03:30,900
is going and the style right now of kind of create a text box so that it's a defined box size and not

48
00:03:30,900 --> 00:03:35,540
just some you know huge goes for width kind of thing or we're never going to see it actually grow.

49
00:03:35,850 --> 00:03:41,940
So what I do is target my box down in here I can see that the idea of text box.

50
00:03:42,180 --> 00:03:48,600
So when I copy that then my style area right here is a text box and in the same opening close curly

51
00:03:48,600 --> 00:03:49,530
brackets.

52
00:03:49,560 --> 00:03:59,190
Now I can simply give it a UPS and I spell it right with oh say 200 pixels.

53
00:03:59,190 --> 00:04:06,980
Keep it simple height of 200 pixels just so we can actually see it's the

54
00:04:09,520 --> 00:04:15,790
background color was a well light gray there and

55
00:04:18,890 --> 00:04:23,900
you know it's an absolute position so same position.

56
00:04:26,010 --> 00:04:34,390
And will also say margin tops kind of get the buttons a little bit there was say 20 pixels.

57
00:04:34,590 --> 00:04:35,630
Keep it simple.

58
00:04:35,650 --> 00:04:36,070
All right.

59
00:04:36,120 --> 00:04:37,410
So that's one test that one out.

60
00:04:37,410 --> 00:04:42,170
Real quick I must say this document and then open up animation in my browser here.

61
00:04:42,630 --> 00:04:46,540
So here's my box all gray with the text in it not a click and grow.

62
00:04:46,680 --> 00:04:50,530
You see that box just kind of grew wide and expanded right there.

63
00:04:51,120 --> 00:04:53,210
So let's go ahead do the other three real quick here.

64
00:04:53,220 --> 00:04:57,750
Going to say move bigger and many things these are all basically the same as Grossmont apply some different

65
00:04:57,750 --> 00:05:01,000
styles to them and you'll see them talking about here.

66
00:05:01,020 --> 00:05:03,180
So now they've got that machine to copy.

67
00:05:03,180 --> 00:05:04,980
That's an interesting time.

68
00:05:04,980 --> 00:05:08,410
Just go ahead and paste that bag in right here.

69
00:05:08,430 --> 00:05:10,840
Now I created another button called MOVE.

70
00:05:10,920 --> 00:05:21,530
So it's going give it an ID of move and they can change this one to move and keep all the same stuff

71
00:05:21,530 --> 00:05:26,250
right here except instead of with say the branch on the left.

72
00:05:26,270 --> 00:05:30,530
Now looks kind of like CSSA except that would normally not be camel case there would be a dash in there

73
00:05:30,530 --> 00:05:32,060
but very similar.

74
00:05:32,240 --> 00:05:38,360
I must say move lact symbol 200 pixels to the left and do that over the course of one second.

75
00:05:38,390 --> 00:05:42,370
So when the copy that Seram save it match my document.

76
00:05:42,400 --> 00:05:44,430
This should be good to move.

77
00:05:44,850 --> 00:05:47,850
So you can see that the guy has moved over there a little bit.

78
00:05:47,870 --> 00:05:51,710
Nice easing and everything is all built into the query.

79
00:05:52,280 --> 00:05:54,160
Now let's go and copy that one again.

80
00:05:55,220 --> 00:05:59,610
And when they to call the third one here is called Thurmon bigger.

81
00:05:59,760 --> 00:06:11,270
So go ahead I give the idea of bigger and I mean to say bigger there same functions and click function

82
00:06:11,280 --> 00:06:20,680
same targeting that text box a game or an animated and instead of moving at various saves make the fonts

83
00:06:21,000 --> 00:06:30,880
as 200 pixels definitely say 40 pixels and we do that over the course of three seconds save that.

84
00:06:30,960 --> 00:06:37,110
Come on back to our browser hit refresh click on bigger and there's my text just expanding out the box

85
00:06:37,110 --> 00:06:42,520
was fixed to a fixed size root there so the text had to kind of go behind it.

86
00:06:42,520 --> 00:06:44,620
So what you can do about that.

87
00:06:44,730 --> 00:06:50,400
But now I can still move everything over and I make the text box grow that kind of help the text fit

88
00:06:50,460 --> 00:06:52,680
better with it in there.

89
00:06:52,680 --> 00:06:56,490
So those are a couple different things that you can see that did kind of ease.

90
00:06:56,670 --> 00:06:59,170
There was some nice smooth motion to it.

91
00:06:59,170 --> 00:07:01,410
Again it's all part of Jake Query.

92
00:07:01,550 --> 00:07:05,350
It's going to do one more before we wrap this one up on my copy of that.

93
00:07:05,620 --> 00:07:08,920
And I do want to call this one many things.

94
00:07:09,390 --> 00:07:15,270
So go ahead and get an ID of many.

95
00:07:15,430 --> 00:07:22,710
When I come back here Id many Now just to kind of show you that we can do all sorts of things within

96
00:07:22,710 --> 00:07:23,370
here.

97
00:07:23,670 --> 00:07:26,290
I can see font size of 400.

98
00:07:26,730 --> 00:07:35,040
I can also get a comma and say margin helps keep think and CSSA.

99
00:07:35,310 --> 00:07:42,490
Laughed left of 400 pixels or a comma.

100
00:07:42,520 --> 00:07:53,910
We can see with took them which they do have 600 pixels.

101
00:07:54,060 --> 00:07:54,720
Crazy.

102
00:07:54,970 --> 00:07:58,320
And we do that over a course of two seconds sort of there.

103
00:07:58,330 --> 00:08:03,610
So maybe this is a brand new one that's used just on its own game retargeting many say that come on

104
00:08:03,610 --> 00:08:05,410
back and it refresh.

105
00:08:05,470 --> 00:08:07,540
And many thanks to all those things it wants there.

106
00:08:07,540 --> 00:08:11,180
So it is slanted over making the text larger.

107
00:08:11,320 --> 00:08:16,930
And the thing I had to do change the width margin left and the font size so that all those things in

108
00:08:16,930 --> 00:08:17,500
one.

109
00:08:17,710 --> 00:08:22,790
So a lot of cool things you can do with the animation function within Jay queery.