Hi Everyone,
Been banging my head against an issue and hoping I might find some help here.
Broken out the problem below.
- I have a gradient that I’m using as an overlay (to create depth) as a user scrolls through sections and to help create visual contrast for each section’s header (as elements flow underneath it). It only becomes visible when content scrolls up and underneath each section’s header area.
- I also have set up three colour themes that a visitor can cycle through (using the pillbox in the bottom left corner).
- When the site transitions from one theme to the next, I’ve set up a fade effect (rather than a hard cut) for a nice smooth, elevated look.
- This transition is working well with all other elements; however, if you click through each theme, you’ll clearly see that I’ve not been able to apply the transition effect to the gradients; these are still switching with a hard cut only.
- Hoping someone might be able to make some suggestions on how I can resolve this. (I can go into more detail about what I’ve currently tried, and I’m also happy to share the current custom code).
I’ve shared my preview link below, but it doesn’t look like my theme interactions are viewable. (You can visit my live page here to view the current theme transition and to clearly see the issue with the transition.)
Thanks everyone.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)