Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
I installed refreshless_preloader/turbo. On my site I am seeing css animations triggered twice. This wasn't the case before. The JS animations are fine!
Steps to reproduce
- Go to site frontpage
- Go to /articles
- Go back to frontpage
- Not in 100% cases, but maybe 85% the css animations are done twice
Debugging:
RefreshLess: prefetching /articles debug.js:43:13
RefreshLess: prefetch used for /articles debug.js:51:13
RefreshLess: navigated to /articles debug.js:89:13
RefreshLess: 💾 preparing page for cache debug.js:32:13
RefreshLess: detaching behaviours debug.js:25:13
RefreshLess: no new stylesheets added debug.js:109:15
RefreshLess: added 1 new script element to the head:
Array [ script ]
debug.js:141:13
RefreshLess: detaching behaviours debug.js:25:13
RefreshLess: no new script elements added to the body debug.js:132:15
RefreshLess: no new script elements to load debug.js:157:15
RefreshLess: drupalSettings has been updated debug.js:97:13
RefreshLess: attaching behaviours debug.js:18:13
GET
https://site-hda-page.ddev.site/sites/default/files/styles/large/public/2026-03/Screenshot from 2026-03-11 18-47-06.png.avif?itok=raxvaQOh
[HTTP/2 404 36ms]
RefreshLess: prefetching / debug.js:43:13
RefreshLess: 💾 preparing page for cache debug.js:32:13
RefreshLess: detaching behaviours debug.js:25:13
RefreshLess: no new stylesheets added debug.js:109:15
RefreshLess: added 1 new script element to the head:
Array [ script ]
debug.js:141:13
RefreshLess: detaching behaviours debug.js:25:13
RefreshLess: no new script elements added to the body debug.js:132:15
RefreshLess: no new script elements to load debug.js:157:15
RefreshLess: navigated to / debug.js:89:13
RefreshLess: no new stylesheets added debug.js:109:15
RefreshLess: added 1 new script element to the head:
Array [ script ]
debug.js:141:13
RefreshLess: no new script elements added to the body debug.js:132:15
RefreshLess: no new script elements to load debug.js:157:15
RefreshLess: drupalSettings has been updated debug.js:97:13
GET
https://site-hda-page.ddev.site/sites/default/files/styles/large/public/2026-03/Screenshot from 2026-03-11 18-47-06.png.avif?itok=raxvaQOh
[HTTP/2 404 41ms]
GET
https://site-hda-page.ddev.site/sites/default/files/2026-02/merlin-at-b2b_color.jpg
[HTTP/2 404 18ms]
RefreshLess: attaching behaviours debug.js:18:13OR
RefreshLess: navigated to / debug.js:89:13
RefreshLess: no new stylesheets added debug.js:109:15
RefreshLess: no new script elements added to the head debug.js:132:15
RefreshLess: no new script elements added to the body debug.js:132:15
RefreshLess: no new script elements to load debug.js:157:15
RefreshLess: drupalSettings has been updated debug.js:97:13
GET
https://site-hda-page.ddev.site/sites/default/files/styles/large/public/2026-03/Screenshot from 2026-03-11 18-47-06.png.avif?itok=raxvaQOh
[HTTP/2 404 48ms]
RefreshLess: attaching behaviours debug.js:18:13Debugging where the css animations are ok ( I only have the last step saved, and now i can't reproduce this case anymore):
RefreshLess: navigated to / debug.js:89:13
RefreshLess: 💾 preparing page for cache debug.js:32:13
RefreshLess: detaching behaviours debug.js:25:13
RefreshLess: no new stylesheets added debug.js:109:15
RefreshLess: added 1 new script element to the head:
Array [ script ]
debug.js:141:13
RefreshLess: detaching behaviours debug.js:25:13
RefreshLess: no new script elements added to the body debug.js:132:15
RefreshLess: no new script elements to load debug.js:157:15
RefreshLess: drupalSettings has been updated debug.js:97:13
RefreshLess: attaching behaviours debug.js:18:13I dont get any log entries.
The animations look like this and are located in an SDC)
.hero--animated {
.hero-label {
animation: slideInDown 0.8s ease-out;
}
h1 {
animation: slideInUp 0.8s ease-out 0.2s both;
}
.hero-description {
animation: slideInUp 0.8s ease-out 0.4s both;
}
.hero-cta {
animation: slideInUp 0.8s ease-out 0.6s both;
}
}
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Comments
Comment #2
anruetherComment #3
anruetherOccasionally(!) I get the console error:
Comment #4
anruetherComment #5
anruetherComment #6
anruetherAlso: Occasionally coffee via shortcut Alt-D stops working