How to create fading animation?

[mo...@coppertino.com]

I have .png file which is not filled, just color circle.
How can I make fading animation to it from 0 to 100 opacity?

[taketh...@gmail.com]

I also would like to know the answer! Is it possible?

[Google Web Designer beta]

Hello,

Please use Opacity property under style section in Properties Panel.

Quick Mode:

- Place the png and change its Opacity to 0 from Properties Panel (Properties>style>)

- Add another thumbnail view by Plus icon

- The 2nd thumbnail is selected with red outline

- Select the png on the stage

- Go to Properties>style>

- Change the opacity setting to 1

- Test the animation by clicking "Play" button above the thumbnail views

Advanced (timeline mode):

- Place the png and change its Opacity to 0 from Properties Panel (Properties>style>)

- Add another keyframe (Right-click to insert keyframe)

- The 2nd keyframe is selected with blue highlight

- Select the png on the stage

- Go to Properties>style>

- Change the opacity setting to 1

- Test the animation by clicking "Play" button above the thumbnail views

Could you try the above steps to see if that works,

Thanks,

Mariko (GWD team)

[Claire Ongley]

Is it possible to make an image fade from top to bottom or side to side? So that the image is revealed slowly? Or are you only able to have the whole image fade in/out in one go?

Thanks,
Claire

[San Khong]

Hi Claire,

You can try putting a div with opacity set to your liking on top of the image and animate that div side to side or top to bottom to have the slowly fade in/out effect.

San

Google Web Designer team

[sunni.pa...@gmail.com]

1. Click on the Layer you want to animate
2. Then right-click on the time frame and choose 'Insert Keyframe'
3. Now you should see a line with two diamonds.
4. Click on one diamond (the diamond should turn yellow
5. Click Properties panel
6. Scroll down to 'Style'
7. Then change the opacity to 0

Now Play the timeline and see the results.

Sunni Pattiwal