Custom code on widgets with RM animations

Custom code
1

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!

2

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

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
Screen Shot 2022-09-27 at 1.47.03 PM1112×578 101 KB

4

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

5

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

6

@neueMeta any luck with this one?

7

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!

8

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.

9

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

<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
Screen Shot 2022-10-18 at 11.11.23 AM2092×682 147 KB

11

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:

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

pls check this.

12

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

13

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.

14

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!

15

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)

16

worked!!! thank you so much :slight_smile:

this is all the code I needed too

[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;
  }
1 Like