justaweeb
justaweeb

Reputation: 31

SWUP changing CSS files and the effects on fade in animations (HeadPlugin)

Hi I encountered a problem with how the HeadPlugin is effecting animations and determined a work around and thought I'd post it here, in-case anybody is running into the same issue. Also all of this may be misinformed and I might be missing something so please let me know.

The Scenario:

Let us say we want to use different stylesheets for different pages on our site, then we can use the HeadPlugin to do so.

The Problem:

When changing stylesheets the fade out animation will work but the fade in animation will not work. (note: if the elements within the stylesheet have the same name in the two pages being transitioned between the fade in animation will work some of the time, depending on the element and the animation.)

A Solution:

To create a separate stylesheet defining all the animations between all your pages and include it in every html page. Then have a separate stylesheet for the rest of the styling for the individual pages or as you see fit. This way you can still style the rest of your elements sharing the same ids/classes differently between pages. (Drawback: initial load time of the stylesheet containing all the animations, but this file should be lazy loaded :D)

Another Solution (me no like) :

Have one big stylesheet with the styles for all the elements in every page (excluding the inline CSS of course). (Drawback1: initial load time of the stylesheet containing all the animations and other styles, this file should not be lazy loaded, unless you split the animation CSS and non animation CSS into separate files. In which case just the initial load time of your style file, unless all the critical styles are done inline in which case you could lazy load both files XD.) (Drawback2: can't have elements sharing the same ids/classes on different pages unless using inline CSS to define the differences.)

Potential solution? (haven't tried):

Using inline CSS to define the animations O_O, idk if this is even possible but probably not a good idea.

I can post some examples demonstrating the problems etc if anybody needs.

If there is a belter way then pls let me know, otherwise hope this helps OwO.

Upvotes: 3

Views: 277

Answers (0)

Related Questions