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

34

Hey, I added custom code blending mode difference on this text widget (infinite running line). I have tried to apply a few solutions you have given but nothing seems to work.

Is the code a bit different for this specific situation? How can I fix this so it works?

This is the text widget I animated so it became an infinite running line

Scherm­afbeelding 2025-03-19 om 16.44.31
Scherm­afbeelding 2025-03-19 om 16.44.311920×337 36.4 KB

35

do you have a link to see the live project? Then I can have a look…

36

Yes, it is www.danielnijs.nl. Thank you!

37

I see, but the mix-blend mode is already added correctly… but its done with pure css?

Now you would need to add the animation (move right/left) to your textwidget. And as now, in the backend, your textwidget is wrapped up in an animation container div you would need to assign the mix-blend-mode value to this parent div. But this parent div doesn´t have a specific ID, which you can adress. So this isn´t possible with css as css doesn´t know the commend “parent of this div”.

But javascript/jquery can do this. So you would add the css value to the data-ids parent via js/jquery. To do this you can use this:

    setTimeout(function() {
  $('[data-id=67d36dff5900395878f55555]').parent().css({"mix-blend-mode":"difference"});
  
  }, 2000);

and don´t forget to encapsule it into a " script >" bracket. the correct syntax is here.

38

Hey, thank you very much for the help but it won’t work. Can you see what is going wrong? I have already tried a lot of things even with the help of AI.

39

yeah, sorry… a dot was missing. and the “.widget-button” was wrong.

here is the correct syntax:

setTimeout(function() {
  $('[data-id="67d36dff5900395878f55555"]').parent().css({"mix-blend-mode":"difference"});
  
  }, 2000);
40

Yes it works now, thank you very much!!

1 Like
41

I’m trying to use this code on my website but it doesn’t work, the ID is correct