`are purely generated by the Interaction app. It produced multiple identical ID’s. And it’s absolutely not in the original SVG or my code.
It would be nice to get some sort of general solution for all Interaction animations that have to play only once on a website. Maybe in the Interactions app as a preference!?
David
---
**Author:**  [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [January 3, 2022, 8:49pm UTC](https://forum.pinegrow.com/t/cookie-set-problem-and-html-validation-errors-in-interaction-animation/6120/4 "2022-01-03T20:49:45Z")
I don’t think the serif:id is something interactions inserted. Did you export your preloaded SVG from Affinity? There are other users complaining of this.
Hmm, thinking about this as an option. Would it cause problems with EU law as far as allowed cookies? I’m not sure if you would have to give the end-user a way out of adding the cookie. I can’t think of any other way to prevent replay.
Bob
---
**Author:**  [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [January 4, 2022, 9:01am UTC](https://forum.pinegrow.com/t/cookie-set-problem-and-html-validation-errors-in-interaction-animation/6120/5 "2022-01-04T09:01:01Z")
@RobM
Yes I created the SVG in Affinity Designer and you are right I just checked and the multiple identical ID’s are in the original SVG code 😒
About the cookies in Europe, they are only a problem when the user doesn’t consent and because this is only a so called functional cookie I don’t see the problem. I implement a privacy app with cookie consent or not consent buttons to the site anyway.
It would be nice if there was a solution for this problem to load a Greensock animation only once!
**If you have a brilliant idea please let me know** 😉
With your and my code the cookie is recognized and named as you can see in Dev Tools \> Application \> Cookies But not preventing the next run.
Update! I found a plugin for Sublime Text to optimize SVG’s [GitHub - 1000ch/Sublime-svgo: SVGO plugin for Sublime Text 🐯](https://github.com/1000ch/Sublime-svgo)
there is a plugin for VS code, but it doesn’t work. Compare to all the online optimizers is gives a clean small amount of minified formatted SVG code without all that clutter. It works with Node js.
Regards & Thanks,
David
---
**Author:**  [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [January 4, 2022, 10:45am UTC](https://forum.pinegrow.com/t/cookie-set-problem-and-html-validation-errors-in-interaction-animation/6120/6 "2022-01-04T10:45:56Z")
Before you added the timeout, when I reloaded your site I got a brief flash of the preloader and then the main site. Best I can think of, and maybe I will ask @abirana to chime in, is to completely hide the preloader and the site content with a black div. If they have visited before bu cookie check simply remove the black div. This will give people returning a quick flash of black prior to the content. If they haven’t visited then hide the black div, but run the preloader. Not sure how else to do this without that initial black flash on a static site where you aren’t running things through a router with some logic.
---
**Author:**  [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [January 4, 2022, 11:51am UTC](https://forum.pinegrow.com/t/cookie-set-problem-and-html-validation-errors-in-interaction-animation/6120/7 "2022-01-04T11:51:37Z")
Yes I hope @abirana has a solution! I the meanwhile I’m going to remake the animation without all unnecessary code from Affinity!
---
**Author:**  [@abirana](https://forum.pinegrow.com/u/abirana)\
**Post date:** [January 4, 2022, 10:35pm UTC](https://forum.pinegrow.com/t/cookie-set-problem-and-html-validation-errors-in-interaction-animation/6120/8 "2022-01-04T22:35:53Z")
@AllMediaLab I checked your issue today and looking at your implementation you are setting cookie using setTimeout, that works only after 9 seconds.
So on the next load those code only executes after 9 seconds again.
So you just need to take out the code that checks and adds class to the preloader.
```auto
let myCookie = Cookies.get('preloader');
let title = document.querySelector('.preloader');
if (myCookie) {
title.classList.add('cookie');
} else {
Cookies.set('preloader', 'true', {expires: 7});
};
```
But you’ve to remember that the interaction will still be running. So it is best to add a trigger condition on the interaction.
---
**Author:**  [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [January 8, 2022, 3:12pm UTC](https://forum.pinegrow.com/t/cookie-set-problem-and-html-validation-errors-in-interaction-animation/6120/9 "2022-01-08T15:12:17Z")
Thanks @RobM & @abirana for helping to make a solution for the cookie problem I had!
I show the solution for others here:
HTML start of the animation has a class added to the preloader called `.preloader-hide`
```auto
```
CSS style the `.preloader-hide` so it does what the name says: `.preloader-hide { display: none;}`
The JavaScript
[GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies](https://github.com/js-cookie/js-cookie) has to be added before the JavaScript code
```auto
let myCookie = Cookies.get('preloader-hide');
let title = document.querySelector('.preloader-hide');
if (myCookie) {
title.classList.add('cookie');
} else {
Cookies.set('preloader', 'true', {expires: 7});
};
```
---
**Author:**  [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [January 8, 2022, 5:17pm UTC](https://forum.pinegrow.com/t/cookie-set-problem-and-html-validation-errors-in-interaction-animation/6120/10 "2022-01-08T17:17:09Z")
Not sure I fully follow the logic, but I think your
```auto
let myCookie = Cookies.get('preloader-hide');
```
should be
```auto
let myCookie = Cookies.get('preloader');
```
Why bother to add a class of ‘cookie’? In your else, shouldn’t you remove the ‘preloader-hide’ class?
Cheers,
Bob
---
**Author:**  [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\
**Post date:** [January 8, 2022, 5:33pm UTC](https://forum.pinegrow.com/t/cookie-set-problem-and-html-validation-errors-in-interaction-animation/6120/11 "2022-01-08T17:33:19Z")
This is the code from my other website that I used in a PM with @abirana Will change the code in the linked site above in this post! Thanks for pointing that out! Works perfect! Thanks again!
```auto
let myCookie = Cookies.get('preloader-hide');
let title = document.querySelector('.preloader-hide');
if (myCookie) {
title.classList.add('cookie');
} else {
Cookies.set('preloader-hide', 'true', {expires: 7});
};
```