# Add Keyframe setting to Gradient Fill.Position; Color;

**URL:** <https://talk.atomisystems.com/t/add-keyframe-setting-to-gradient-fill-position-color/5770>\
**Category:** Feature Requests\
**Created:** [November 4, 2021, 12:49pm UTC](https://talk.atomisystems.com/t/add-keyframe-setting-to-gradient-fill-position-color/5770 "2021-11-04T12:49:47Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![afei](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/afei/32/3211_2.png) [@afei](https://talk.atomisystems.com/u/afei)\
**Post date:** [November 4, 2021, 12:49pm UTC](https://talk.atomisystems.com/t/add-keyframe-setting-to-gradient-fill-position-color/5770/1 "2021-11-04T12:49:47Z")

</div>

Without the **color keyframe** setting  
for **Gradient Fill.Position; Color;** ,  
I don’t know how to create the sunset color changing as below:  
from ![image](https://talk.atomisystems.com/uploads/default/original/2X/2/2befb4f3f56a2b8b3871ada708ddbd97d0ba7cf0.png)  
to ![image](https://talk.atomisystems.com/uploads/default/original/2X/6/6cf62dfa18c4768722651eee04bf2e56e9fb98fc.png)  
 ![image](https://talk.atomisystems.com/uploads/default/original/2X/d/deee259d91cad2f99ff57cc4bc2dcd04bd8b65ba.png)  
Please **add keyframe settings (diamond buttons)**  
to Properties.Styles.Fill. **Gradient Fill.Position**  
and Properties.Styles.Fill. **Gradient Fill.Color**.

Regards,  
Afei

---

<div class="post-metadata">

**Author:** ![Quynh](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/quynh/32/3194_2.png) [@Quynh](https://talk.atomisystems.com/u/Quynh)\
**Post date:** [November 5, 2021, 1:59am UTC](https://talk.atomisystems.com/t/add-keyframe-setting-to-gradient-fill-position-color/5770/2 "2021-11-05T01:59:27Z")

</div>

Hi Afei,

We will consider implementing this feature if having more requests from users.

Regards,  
Quynh

---

<div class="post-metadata">

**Author:** ![fadi](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/f/ecae2f/32.png) [@fadi](https://talk.atomisystems.com/u/fadi)\
**Post date:** [May 5, 2023, 8:49pm UTC](https://talk.atomisystems.com/t/add-keyframe-setting-to-gradient-fill-position-color/5770/3 "2023-05-05T20:49:02Z")

</div>

Hi,  
I just added a shape with gradient fill and just discovered that I can’t add it to a keyframe. Is there a workaround this issue?

I created two shapes with two different gradient fills, how do I show one but hide the other one at the same keyframe?

---

<div class="post-metadata">

**Author:** ![Hang](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/hang/32/865_2.png) [@Hang](https://talk.atomisystems.com/u/Hang)\
**Post date:** [May 8, 2023, 3:25am UTC](https://talk.atomisystems.com/t/add-keyframe-setting-to-gradient-fill-position-color/5770/4 "2023-05-08T03:25:09Z")

</div>

Hi Fadi,

For the first question, adding opacity keyframes to a gradient shape can help create a sunset-alike effect.  
 ![image](https://talk.atomisystems.com/uploads/default/original/2X/8/85f2dc2a40a674b0d2416f2ae16cb268b9b6dc3f.png)

For the second question, to show one shape and hide the other one at the same time, you can use a timeline trigger ([Use Timeline Triggers in Saola Animate 3 - Atomi Systems, Inc.](https://atomisystems.com/html5-animation/saola-animate-3/use-timeline-triggers-in-saola-animate-3/)):  
 ![image](https://talk.atomisystems.com/uploads/default/original/2X/1/161fe1ab4167601a47ccb859bb995edd44159358.png)

Please refer to this sample for more information:  
[gradient effect.saolapack](https://talk.atomisystems.com/uploads/short-url/tgBsPosy4oR4fdyLNng7bp4u62k.saolapack) (2.0 KB)

Hope this helps.  
Regards,