Google Web Designer Blog: Popular Questions from the Google Web Designer Forum

Popular Questions from the Google Web Designer Forum

Monday, April 25, 2016

The Google Web Designer Community Forum How do I make an asset appear at a specific time during my animation?

Approach 1 - Animating opacity from 0 to 1 between two keyframes

Select the first keyframe/thumbnail in the animation.

Add the new element at the first keyframe/thumbnail.

Select the element at the first keyframe/thumbnail and use the Properties panel to set its opacity to 0.

Add a keyframe at the time you want the element to “appear’ (let’s call it time t). Its opacity will still be 0 at time t.

Add another keyframe right before time t (let’s call it time t’) and set the duration between t’ and t to 0.01s.

Select the element at time t and set its opacity to 1.

Select the element at time t’ and set its opacity to 0.

timeline_animate_opacity.zip Approach 2 - Using Timeline Event Markers, CSS Panel, and the Events panel to show the element at the desired time

Select the blue DIV and use the Properties panel to give it an id (let’s use ‘bluediv’ for the id in the example below).

Select ‘bluediv’ in the first keyframe and open the CSS panel.

Add the style: visibility: hidden

Switch the Timeline to Advanced mode.

Move the Timeline’s playhead to the time you want the element to be visible and add a new Timeline event marker by clicking on the diamond icon in the Timeline panel’s Events row.

Double-click on the newly added diamond event marker to bring up the Events dialog and add the following action for that event. Action: CSS -> Set styles -> ID of the element -> ‘+’ button to add the CSS style visibility: visible.

We can now preview to view the resulting animation in the browser.

timeline_css_event.zip Can I use external JavaScript libraries in Google Web Designer?

Greensock animation libraries

In Code view we’ll add a script element to reference the library we want to use. For this example, we’ll add the following script element to the list of script elements in the head. <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.18.0_56fa823cfbbef1c2f4d4346f0f0e6c3c_min.js"></script>

Now let’s switch back to Design view and add a DIV element using the Tag tool.

We’ll then use the Properties panel to set a background color on it, in this example let’s use blue.

Once the color is set, we’ll also use the Properties panel to set the id to ‘bluediv’.

Next, Right-click on the element and select “Add event…” to bring up the Events dialog.

We can set up the event as follows:

Event: Mouse->click

Action: select Custom, and click on ‘+ Add custom action’ to bring up the Custom code section

In the ‘Custom code’ dialog, enter a name for the function (let’s name it ‘rotateDiv’) and add the following custom code: TweenLite.to('#bluediv', 1, {rotation: '+=360'});