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?
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
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! 
it shouldn´t have changed though.
well…I put the id, which is the same, and it doesn’t work for some reason 
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.
Hi, thank you very much! I had the same problem with a text on the homepage, I followed your advice and it’s now solved! Except that when I open the site in preview sometimes it works, other times it doesn’t (it stays blank), do you know why?
Also, I would like to set another text to difference but trying to repeat the same process doesn’t work. Could you help me?
Thanks.
how many RM-animations does your test has? If it has 1 there has to be 1 .parent() in it. if it has 2, there has to be 2x .parent() in it.
They were 2 and yes, thanks! It works.
Would you happen to know how to make only the text go to difference and not the entire div?
hmm, would you post a link to the page? then I can have a look
Sorry for the late reply, here it is:
Also, di you know why now that I’ve published it I’m seeing a serif instead of the sans I chose?