Default state shown before animation

[shalildev]

Hello there, I have a question, on the page load I see the text already shown and then the animation starts, ideally I don't want to see the text right away and just animate it in, am I doing something wrong or?

See the Pen PoxxJPp?editors=1010 by shalildev (@shalildev) on CodePen

[akapowl]

 

Welcome to the forum.

 

2 hours ago, shalildev said:

am I doing something wrong or?

 

What you're seeing is an FOUC - a flash of unstyled content.

It's not wrong per se, but more of a logical result of how your code gets processed - it's explained in a bit more detail in the video on the page linked below.

 

 

There's multiple ways you can handle a situation like that, and different scenarios may require different approaches.

See the Pen OJaazPL by akapowl (@akapowl) on CodePen

 

[shalildev]

Thank you so much @akapowl this is exactly what I was missing

[jlin]

Sorry to add to this solved thread @akapowl, but I ran into some odd behavior trying this pen with buttons.

 

See the Pen GRLZOpo by jade_lin (@jade_lin) on CodePen

 

This is more of a CSS question than GSAP, but if you delete some of the!important attributes from the button CSS, somehow showing the button from a "hidden" visibility state causes many button values to be lost.

 

Is normal or expected behavior?

 

When I don't apply the visibility: hiddenattribute, the button shows as normal...

[Rodrigo]

Hi @jlin,

 

I read your post a few times and checked your demo and unfortunately I can't seem to understand what's the issue you're having. 

10 hours ago, jlin said:

somehow showing the button from a "hidden" visibility state causes many button values to be lost.

What exactly you mean with this? What button values?

 

Happy Tweening!

[akapowl]

You are loading tailwind.css via the settings in the HTML section.
Without tailwind, the !important statements don't matter at all, it seems.

So it looks to me like it is actually more of a tailwind question;
and you'll have to find out what tailwind does to your button.

To be honest, asking a plumber why the lamp in your living room is flickering, might not be the best approach for seeking help.
If you can not find the issue yourself, I'd suggest asking in one of tailwind's support channels, e.g. their discussion forum on GitHub.

https://v1.tailwindcss.com/community
https://github.com/tailwindlabs/tailwindcss/discussions

[Rodrigo]

Love the plumber analogy @akapowl, your post earned a Gif!

[jlin]

On 3/12/2024 at 5:37 AM, akapowl said:

To be honest, asking a plumber why the lamp in your living room is flickering, might not be the best approach for seeking help.
If you can not find the issue yourself, I'd suggest asking in one of tailwind's support channels, e.g. their discussion forum on GitHub.

https://v1.tailwindcss.com/community
https://github.com/tailwindlabs/tailwindcss/discussions

Apologies @akapowlI didn't noticed you responded to my question -- (need to turn on my email which I just did now). Yes, this is more of a CSS issue. I'll check in those channels, and 😆 at the GIF and analogy.