Custom code on widgets with RM animations

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!

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.

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’.

<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>

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!

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).

Not sure if this helps: Code on animation - #3 by Elizaveta

@neueMeta any luck with this one?

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!

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:

<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.