# Custom code on widgets with RM animations

**URL:** <https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637>\
**Category:** Custom code\
**Created:** [September 2, 2022, 6:16pm UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637 "2022-09-02T18:16:17Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![willowskye](https://avatars.discourse-cdn.com/v4/letter/w/47e85d/32.png) [@willowskye](https://forum.readymag.com/u/willowskye)\
**Post date:** [September 2, 2022, 6:16pm UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/1 "2022-09-02T18:16:17Z")

</div>

Hello all,

I’ve been trying to add some custom coded animations on top of the animations already possible in Readymag, but can’t seem to get anything to work. I’ve tried everything I can think of for both images and text and neither will work.

For a basic example, I just want to add a transition so that when a link changes color it isn’t immediate. I’ve been able to get this to work on accordions but no elements that I’m targeting with an ID. Here’s what I’ve tried (with one div, two, etc).

[data-id=“630d3b8386eb6f00200ac8f9”] \> div \> div {  
transition: color 0.5s;  
}

Let me know if I’m missing something. Thanks in advance for any help!

---

<div class="post-metadata">

**Author:** ![HEADLESS.HORSE](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/headless.horse/32/144_2.png) [@HEADLESS.HORSE](https://forum.readymag.com/u/HEADLESS.HORSE)\
**Post date:** [September 10, 2022, 11:42am UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/2 "2022-09-10T11:42:04Z")

</div>

Hi @willowskye great to hear you managed to select the data-id as that can be the hardest part to identify!

I am unsure if Readymag has defined this immediate animation as either a ‘Transitions’ or a ‘Keyframe Animation’ — that said I have also defined the colour for the text’s ‘initial’ state and then the ‘hover’ state. I’ve set this up as a ‘Transition’, you can learn more about the differences [here](https://www.bryanbraun.com/2014/05/05/css-transitions-vs-keyframe-animations/).

I’ve also include ‘!important’ just to ensure those affects override any existing styles from the Readymag style sheet. You’ll just need to update and include the color value. If you want to animate anything else such as it’s font-size or padding etc. Then update the transition css from ‘color’ to ‘all’.

```auto
<div data-id=“630d3b8386eb6f00200ac8f9”>
  <div>
    <div>
      <p>Test Copy Here</p>
    </div>
  </div>
</div>

<style>
  [data-id=“630d3b8386eb6f00200ac8f9”]>div>div {
    -moz-transition: color .5s ease-in !important;
    -o-transition: color .5s ease-in !important;
    -webkit-transition: color .5s ease-in !important;
    transition: color .5s ease-in !important;
    color: green !important;
  }

  [data-id=“630d3b8386eb6f00200ac8f9”]>div>div:hover {
    color: red !important;
  }
</style>

```

---

<div class="post-metadata">

**Author:** ![willowskye](https://avatars.discourse-cdn.com/v4/letter/w/47e85d/32.png) [@willowskye](https://forum.readymag.com/u/willowskye)\
**Post date:** [September 27, 2022, 5:53pm UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/3 "2022-09-27T17:53:19Z")

</div>

Hi @HEADLESS.HORSE , thank you so much for this!

Unfortunately I’m still not able to get it to work. I’m wondering if I’m not selecting the correct data ID, but I only see one on the div container for the paragraph. I’m adding a photo below for your reference, let me know if you notice anything.

Thanks again!

 ![Screen Shot 2022-09-27 at 1.47.03 PM](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/1X/a308366ff9d0422bf70d938c6a8c9994f4ab0005.png)

---

<div class="post-metadata">

**Author:** ![gagewente](https://avatars.discourse-cdn.com/v4/letter/g/58956e/32.png) [@gagewente](https://forum.readymag.com/u/gagewente)\
**Post date:** [September 27, 2022, 8:51pm UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/4 "2022-09-27T20:51:49Z")

</div>

I’ve found that certain CSS styling works with RM animations, while others don’t.

For example, filter: blur works on an animated widget, while backdrop-filter: blur does not (at least as far as I’ve tried it).

---

<div class="post-metadata">

**Author:** ![gagewente](https://avatars.discourse-cdn.com/v4/letter/g/58956e/32.png) [@gagewente](https://forum.readymag.com/u/gagewente)\
**Post date:** [September 27, 2022, 8:53pm UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/5 "2022-09-27T20:53:49Z")

</div>

Not sure if this helps: [Code on animation - #3 by Elizaveta](https://forum.readymag.com/t/code-on-animation/567/3)

---

<div class="post-metadata">

**Author:** ![HEADLESS.HORSE](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/headless.horse/32/144_2.png) [@HEADLESS.HORSE](https://forum.readymag.com/u/HEADLESS.HORSE)\
**Post date:** [September 28, 2022, 8:48am UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/6 "2022-09-28T08:48:43Z")

</div>

@neueMeta any luck with this one?

---

<div class="post-metadata">

**Author:** ![willowskye](https://avatars.discourse-cdn.com/v4/letter/w/47e85d/32.png) [@willowskye](https://forum.readymag.com/u/willowskye)\
**Post date:** [October 3, 2022, 6:13pm UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/7 "2022-10-03T18:13:49Z")

</div>

I’ve tried the code from this thread with no luck unfortunately. I noticed that @neueMeta mentioned it only works if there’s only one RM animation applied, and I have more than one, so I’m thinking maybe that’s the issue. Thanks for the help though!

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [October 4, 2022, 7:28am UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/8 "2022-10-04T07:28:46Z")

</div>

hey,

in the other thread, I mentioned, that the code is working on a widget with ONE animation. If you have TWO animation set on it you just need to add another “.parent()” as RM puts the widget inside a div for every RManimation you add.

Code would then look like this:

```auto
<script>  
window.addEventListener("load", () => {   
$('[data-id=62fd915b02ea890013431e5f]').parent().parent().css({"mix-blend-mode":"difference"});
});
</script>

```

not tested though. but come back if its not working.

---

<div class="post-metadata">

**Author:** ![willowskye](https://avatars.discourse-cdn.com/v4/letter/w/47e85d/32.png) [@willowskye](https://forum.readymag.com/u/willowskye)\
**Post date:** [October 18, 2022, 3:14pm UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/9 "2022-10-18T15:14:13Z")

</div>

Thank you! Unfortunately it’s still not working, I tried with one and two .parent(). This is my code:

```auto
<script>  
window.addEventListener("load", () => {   
$('[data-id=630d3b8386eb6f00200ac8f9]').parent().parent().css({"transition":"color .5s ease-in"});
});
</script>

```

 ![Screen Shot 2022-10-18 at 11.11.23 AM](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/1X/923ba28b8138b6b77bf4ae7d76fde4ad92d4c017.png)

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [October 18, 2022, 7:17pm UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/11 "2022-10-18T19:17:02Z")

</div>

in this case it should be only one .parent() as in the devtoolscreen its only one animation.

but another thing you could try is to erase the “window.addEventListener” and exchange it into a settimeout function.

should then look like this:

```auto
<script>  
 setTimeout(function() {
$('[data-id=630d3b8386eb6f00200ac8f9]').parent().css({"transition":"color .5s ease-in"});
      }, 1000);  
</script>

```

pls check this.

---

<div class="post-metadata">

**Author:** ![willowskye](https://avatars.discourse-cdn.com/v4/letter/w/47e85d/32.png) [@willowskye](https://forum.readymag.com/u/willowskye)\
**Post date:** [October 18, 2022, 8:13pm UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/12 "2022-10-18T20:13:29Z")

</div>

Okay that makes sense. I tried this but still no luck 😩

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [October 19, 2022, 7:25am UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/13 "2022-10-19T07:25:27Z")

</div>

sure not? I mean, what do you want to achieve? with the css :  
“transition”:“color .5s ease-in”  
…nothing will happen. but the css should be applied to the element. it also needs to have a color on that element. and maybe a action to change it? otherwise you will not see any change though.

---

<div class="post-metadata">

**Author:** ![willowskye](https://avatars.discourse-cdn.com/v4/letter/w/47e85d/32.png) [@willowskye](https://forum.readymag.com/u/willowskye)\
**Post date:** [October 19, 2022, 1:13pm UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/14 "2022-10-19T13:13:22Z")

</div>

Sorry yeah, since the element is a link it changes colour when hovered on, so I just wanted to add the transition so it’s not an immediate change, it fades to the other colour. I was able to make this work on my accordion drop-downs so was hoping to do it on the anchor links as well. I hope that makes sense!

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [October 24, 2022, 10:08pm UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/15 "2022-10-24T22:08:12Z")

</div>

but than you should add the css value to the .maglink class for example.

I think you could do this with pure css by taking your data-id and look for a child with the class .maglink and add the transition. (not tested, but this would be my apporach)

---

<div class="post-metadata">

**Author:** ![willowskye](https://avatars.discourse-cdn.com/v4/letter/w/47e85d/32.png) [@willowskye](https://forum.readymag.com/u/willowskye)\
**Post date:** [October 26, 2022, 4:09pm UTC](https://forum.readymag.com/t/custom-code-on-widgets-with-rm-animations/637/16 "2022-10-26T16:09:50Z")

</div>

worked!!! thank you so much 🙂

this is all the code I needed too

```auto
[data-id="630d3b8386eb6f00200ac8f9"] .maglink {
    -moz-transition: color .5s ease-in !important;
    -o-transition: color .5s ease-in !important;
    -webkit-transition: color .5s ease-in !important;
    transition: color .5s ease-in !important;
  }

```