Created a pre-loader with Interactions, but get a lot of HTML validation errors in the code! This is how it came out of the app, did not change anything!
Secondly I tried to add JS Cookie to the Interactions Animation, but no luck. You can see my code commented out in the allmedialab.js file and the style.css
Can you please have a look at it? What I try is create a cookie that is stored to prevent the animation to play more then once on the home page per visit of the website.
@AllMediaLab Hi David,
The HTML violations are mostly from the SVG image. The other two errors are because one of the sections doesn’t have a heading text and the video has a deprecated way to set the border. We will see if these can get corrected in an upcoming release.
For your cookie, I think you need to add your checking before the setting. So something like,
let myCookie = Cookies.get('pre');
let title = document.querySelector('.preloader');
if (myCookie) {
title.classList.add('cookie');
} else {
Cookies.set('pre', 'true', {expires: 7});
}
Not sure how you have the interaction set-up so as not to run if it has the class. I think this should work, but without doing a bit of testing I can’t be sure. You might want to test a bit by putting a few console.log statements in and checking the cookie list.
Let me know if this helps,
Bob
Thanks for that! Get the same result as with my code. The display none is activated directly. The js cookie should only start after the animation is finished. I left your code in for now
The HTML validation errors I’m referring to <g id="E"><g id="E1" serif:id="E" transform="matrix(0.00273887,-0.999996,0.999996,0.00273887,30827,113223)">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!?
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
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 🐯
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.
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.
@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.
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.
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});
};
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!
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});
};
