Code on animation

Hey! I’ve added a simple code (blending mode) to my text and it was working. But when I add animation to that code it stops…
I’ve checked the id of the object and it was correct. What could be the problem? Does code only work on static objects?

Hi @Elizaveta mind sharing a link to your project / the code injection?

Hey! It is very simple - looking like this (on the pic).
And animation is pretty easy as well - just move on scroll

I used this code:
[data-id=“62fd915b02ea890013431e5f”] {
mix-blend-mode: difference;
}

Should I add something to it that it will work with animation?

well,
the problem here is, if you add an animation to an element RM will put the data-id element you are adressing into another div called “animation-container”.
You now have to add the css mix-blend-mode value onto the “animation-container” to take effect.
BUT the now parent “animation-container” doesn´t have a unique id and it is not possible to adress a parent div of an element with pure css. (only children is possible).

The solution to set the css of this parent container can be solved via javascript/jquery.

In the before custom code section insert this:

<script>
$('[data-id=619245f5759053003d156455]').parent().css({"mix-blend-mode":"multiply"});
</script>

hope this helps.

2 Likes

@neueMeta brilliant! :slight_smile:

1 Like

O, wow! Thank you so much!

Should I keep the ‘‘data id’’ you’ve written or put the previous one from above or you’ve written random numbers and I need to find id in animation container?

sorry for thousand of questions…

yeah, you need to insert your own data-id! :slight_smile:
it shouldn´t have changed though.

well…I put the id, which is the same, and it doesn’t work for some reason :neutral_face:

it looks like you wrote it:

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

Ok this happens if the elements are not fully loaded/present if the function fires.
You can wrap it up in a function that only fires it, if the page is loaded.

would look like this:

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

yep, now it’s working! thank you so much!

Could you please advise, I was lucky enough to come across your answer, I tried your code and it worked, but when I tried it on another project it didn’t work on this one or the previous one, maybe you know why?

hey there …
this code works on an element with 1 RManimation applied to. if you have an element without an RManimation applied to, you have to erase the “.parent()” out of the code.

Yes, you are right, everything works. Can this code that works specifically with animation work in the mobile version?

it works on all devices, yes.