Webstudio
Log in

Join the Webstudio community

Updated 2 months ago

My animated content briefly flashes upon loading the page and starting the animation

At a glance

The post describes an issue with flashing animation on a website, aitoggler.com, and a fix that involves setting the opacity to 0 in the style panel. Community members discuss the problem, which seems to be caused by JavaScript setting the animation and the default state not being designed as the starting animation. The fix suggested is to set the opacity to 0 in the style panel so that's how the page loads initially. One community member thanks the other for the fix, and there is a discussion around using HTML embeds and the client-only toggle to handle this type of issue.

AAlex__
·
Client only toggle did not solve it.

Here is how the flashing looks, and how it's fixed if I put my animation code (only css) in project settings instead.

Seems like a loading priority issue, but not sure how to solve it without project settings. My fix is more like a band-aid fix anyway, not a proper one.

Website is:
aitoggler.com
Attachments
correct.gif
wrong.gif
JJohn Siciliano
Marked as solution
usually this happens when JS is setting the animation and the default state isn't designed as the starting animation

Problem
  1. Page loads with text opacity 1
  2. JS loads animation which says set opacity 0 and fade to opacity 1.
The glitch is CSS saying opacity 1 then js saying opacity 0.

Fix
Set opacity 0 in the style panel so thats how the page loads intially
View full solution
J
A
O
12 comments
JJohn Siciliano
usually this happens when JS is setting the animation and the default state isn't designed as the starting animation

Problem
  1. Page loads with text opacity 1
  2. JS loads animation which says set opacity 0 and fade to opacity 1.
The glitch is CSS saying opacity 1 then js saying opacity 0.

Fix
Set opacity 0 in the style panel so thats how the page loads intially
AAlex__
Thank you brother, that was the fix indeed 🙏
OOleg Isonen
If you want something to hide before the client-side javascript loads, put it into html embed, without client-only, if your js needs client-only, then separate that css into a separate html embed so that they can have different client-only setting
JJohn Siciliano
I'm confused but interested.

I think he has an intersection observer that adds a class like "in-view". When that class shows up, an animation plays like.

Plain Text
from {
  opacity: 0;
}
to {
  opacity: 1;
}


So the "default" state of the element needs to be opacity 0.

How would you go about this?
OOleg Isonen
I would set the default either in the style panel or with style tag in html embed with client-only unchecked
JJohn Siciliano
Style panel is what I suggested.

You would put this in the html embed?
Plain Text
<style>
.myEl {opacity: 0;}
</style>


What difference does client only toggle have here? I've only viewed that in terms of scripts
OOleg Isonen
if you don't use client-only, it will ssr it, so style comes with all html and will have no delay whatsoever if it is before the actual elements, I would only do this if style panel can't be used to set the value
OOleg Isonen
e.g. if the value needs to be on a class that needs to be removed with js later, then you would want that coded approach
OOleg Isonen
I can't imagine this can't be done through style panel though
JJohn Siciliano
I don't follow. If the CSS is not "SSR", then how does it get to the client?
OOleg Isonen
The content of html embed won't be server-rendered if client-only is used
OOleg Isonen
so there is a delay, it gets rendered when javascript loads
Add a reply
Sign up and join the conversation on Discord