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

Web Designer Blog

The latest news and tips from the Google Web Designer team

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'});

using_external_js.zip Closing Thoughts Community ForumPosted by Nivesh, UX Engineer

Labels: animation , events , google web designer , javascript

15 comments :

Anak ElangAugust 19, 2019 at 11:16 PM
Joker168
Daftar 918kiss
Joker128
Joker388
Joker888
Joker688
ReplyDelete
Replies
Richard MajeceSeptember 2, 2019 at 7:18 AM
I think that on https://eduessayhelper.org/blog/compare-contrast-essay-topics you can read really useful info about Compare and Contrast Essay Structure. It will help you to get a high grade
ReplyDelete
Replies
Rocky HardySeptember 7, 2019 at 5:09 AM
Content Marketing is one of the most popular marketing techniques to improve your online visiblity & business branding fast. Small Business SEO, Organic SEO, SEO Expert, Social Media Optimization, Web & Graphic Design, Search Engine Optimization, SEO Consultant
ReplyDelete
Replies
Damian Alexander-Du'belSeptember 22, 2019 at 8:40 PM
Nice Article, I have bookmarked your site for future posts. Blogger, WordPress, Medium, YouTube, Vimeo, Blog
ReplyDelete
Replies
Yachi YeoApril 27, 2020 at 12:02 PM
It’s very easy to find out any matter on web as compared to textbooks, as I found this piece of writing on this site.

web design
website design
web design philippines
website development company
website design philippines
web development company manila
web design company manila
web design agency philippines
web design manila
web development company philippines
web development philippines
website design company
ReplyDelete
Replies
Vivek_TankMay 5, 2020 at 12:20 PM
Thumbs Up for the useful information!

web design
website design
web design agency singapore
web development company singapore
web design company
eCommerce web development singapore
eCommerce website design company Singapore
eCommerce web design singapore
ecommerce developer singapore
magento web design company
magento website development
ReplyDelete
Replies
Amy ForceMay 19, 2020 at 12:12 AM
It’s very easy to find out any matter on web as compared to textbooks, as I found this piece of writing on this site.

accounting services singapore
accounting firms in singapore
audit firm in singapore
audit firm singapore
secretarial services singapore
outsourced accounting services singapore
business tax advisory
company incorporation singapore
corporate secretarial services singapore
transaction structuring advice
ReplyDelete
Replies
Mia ChangMay 20, 2020 at 1:00 AM
Thanks for the information. It's very useful. If any one is looking for cardiologist singapore or heart specialist sinapore, check out Dr. Lim Ing Haan, heart specialist clinic singapore best place for cholesterol test, check heart palpitation.

cardiology clinic
cardiology clinic singapore
singapore cardiologist
singapore heart & vascular clinic
heart specialist
heart doctor singapore
interventional cardiologist singapore
interventional cardiology singapore
heart specialist clinic
ReplyDelete
Replies
KathyMay 28, 2020 at 12:29 AM
I love this article, it is so helpful to me, thanks for sharing!
Twin Cities Web Design
ReplyDelete
Replies
UnknownJune 19, 2020 at 10:18 AM
Cool article!
Check the best corporate transportation in Wayne NJ
ReplyDelete
Replies
UFA888August 3, 2020 at 11:26 PM

Very Helpful Article. แทงบอล It might help you. แทงบอล Thanks For Sharing
แทงบอล Thank you very much.
ReplyDelete
Replies
UFA888August 3, 2020 at 11:26 PM

This Is Really Useful And Nice Information. แทงบอล
This are such great articles. แทงบอล This articles can help you to make some new ideas.
https://sakukrub98.hatenablog.com/entry/2020/08/04/131932?_ga=2.66731565.2071274699.1596422357-1286484823.1596077192 I appreciate for reading my blogs.

ReplyDelete
Replies
UFA888August 3, 2020 at 11:26 PM

This are new articles style for you. https://sakukrub1.wixsite.com/mysite/post/snag-a-subaru-brz-asap-because-it-s-apparently-dead-for-2021 You can find some new idea on this. https://our-mrs-saku-love.tumblr.com/post/625491180458803200/snag-a-subaru-brz-asap-because-its-apparently It might help you to write or think some new idea.
http://site-2272261-6860-7525.mystrikingly.com/blog/ev-maker-lordstown-motors-plans-ipo-merging-with-blank-check-firm Thanks for sharing such a wonderful post.
https://5e43ec86db9aa.site123.me/blog/ev-maker-lordstown-motors-plans-ipo-merging-with-blank-check-firm I am very glad for reading my articles.
ReplyDelete
Replies
Terrence MunangiSeptember 6, 2020 at 1:52 AM
Get first page rankings in Google – We offer guaranteed SEO services that boost your website's organic rankings, visibility & traffic.
ReplyDelete
Replies
https://www.spreeretail.com/bejeweled-cz-cuff-black-toneSeptember 9, 2020 at 1:55 AM
Frequently Asked Questions about Web Design. What is Web Design, and why is it important to learn? Web Design is ...

web design company Washington dc
ReplyDelete
Replies

Labels

Archive

2018
- January

2017
- December
- April
- March

2016
- November
- June
- May
- April
- March
- February

Feed

Company-wide

Official Google Blog
Public Policy Blog
Research Blog

Products

DoubleClick Blog
AdWords Blog
Chrome Blog

Developers

Developers Blog
Ads Developer Blog
HTML5 Rocks Blog

Google
Privacy
Terms