Code on animation

Custom code
22

Sorry, here’s the updated link
https://violante.org
Actually, I don’t understand why but both the writing “Studio Violante” and the texts that scroll at the end, which were previously on difference, now remain white.

I now have this in css (for both Studio Violante and texts in the poster gallery)

[data-id="655ca8cacf632900190dd660"] {
  mix-blend-mode: difference;
}

[data-id="655ca8cacf632900190dd68f"] {
  mix-blend-mode: difference;```

An this in the before body
<script>  
window.addEventListener("load", () => {   
$('[data-id=655ca8cacf632900190dd660]').parent().css({"mix-blend-mode":"difference"});
});
</script>

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

hey, the problem is, that your css rule is only addressing your data-id widget. but as it is embed in a “animation container” the mix-blend-mode cannot be seen as its not adressing the right one.

The code you have provided, should work, but, it probably gets not executed.
I would guess, that the “load listener” isnt firing.

To investigate, please erase the window listener and exchange for a timeout. If this is now working you know, that the load-listener isnt working.

<script>  
  setTimeout(function() {
$('[data-id=655ca8cacf632900190dd660],[data-id=655ca8cacf632900190dd68f]').parent().css({"mix-blend-mode":"difference"});


  }, 3000);  
</script>
24

Yess, now it works!
So there is no way to leave posters out of blend mode and only send scrolling texts to difference?

25

hey, no you can also split it up again and set up different blending modes.

26

Problem is that they are now in two different groups, but when I get the text ID it keeps sending me the poster on difference too.

27

could you explain a bit more in detail, what is your code right now?

Here another example, that is a bit more structured:

<script>  
  setTimeout(function() {
// text id
$('[data-id=655ca8cacf632900190dd660]').parent().css({"mix-blend-mode":"difference"});
// image id
$('[data-id=655ca8cacf632900190dd68f]').parent().css({"mix-blend-mode":"multiply"});

// if Rm element has one more animation, add another ".parent()"


  }, 3000);  
</script>
28

Right now I have this one in css

[data-id="655ca8cacf632900190dd660"] {
  mix-blend-mode: difference;
}

[data-id="655ca8cacf632900190dd68a"] {
  mix-blend-mode: difference;
}```
32

Hello, how are you? A question: what if I want to use this code on a button? I tried using the codes you sent us, but it only works on text, it doesn’t work on buttons

33

with a button it would work like this:


    setTimeout(function() {
  $('.widget-button[data-id=6729ce9a8e7a3af2671095f4]').css({"mix-blend-mode":"difference"});
  
  }, 2000);

and if it has a animation add a .parent()

and don´t forget to put to encapsule it into a " script >" bracket