Sorry, I’m not downloading anything. I don’t do that.
Please show a demo of the problem.
It puts it into a html web page for you.
That’s how I viewed each separately.
Outside of jsfiddle.
I was testing each side by side to see if I saw any differences.
I was testing each inside an html document.
At this view your code is missing a scrollbar. https://jsitor.com/uJ_VIOTyN
I am able to scroll up and down with my mouse but there is no right scrollbar.
It’s there for me.
I removed the background so you could see it.
You’ll need to provide more information such as browser version and platform etc.
I’m out for a few hours now anyway so I suggest you debug for yourself and see if you can find what the cause is.
I made it this view by making the browser window smaller in size.
Do this, then scroll up and down with your mouse.
Where there is scrolling, there should be a scrollbar.
I can’t replicate that on my Mac computer. I’m guessing its the overflow:auto on .container so perhaps try changing it to visible and see if there’s a difference.
.container {
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 0;
height: auto;
overflow: visible; /* was auto*/
display: flex;
justify-content: center;
min-height: 100%;
transition: opacity 5s linear 1s;
pointer-events: initial;
}
I’ll try and have a look tomorrow on a PC to see if its a PC thing.
That’s it from me tonight:)
1 Like
Yes, you were right.
I just tested it and this fixed the issue:
overflow: visible;
I noticed something.
In my code, hovering/jumping from one button to another is much faster.
It’s slower in your code.
I’m not sure why that is.
I don’t believe it has anything to do with the transition effects, because after I removed them, I saw no difference.
It’s just that I added a transition on hover so that the hover effect fades in rather than just appears immediately.
The timing can be adjusted in the transition but I prefer the transition effect.
1 Like
If I was not using the cross fade effect, how would this css be adjusted to add the fade-out back into the code?
Currently the fade-in of the buttons is the only thing working.
When you click on the buttons they don’t fade-out.
The curtains don’t close when the exit button is clicked.
And there is no fade-out that comes after.
Everything else seems to work.
The backgrounds appear.
The first curtain opening appears.
Mainly the fade stuff and the curtain closing is not working, why is that?
What I did was, I took the css from this code: https://jsitor.com/KgvKufICJ
And added it to this code making minor adjustments. https://jsfiddle.net/srx7tgnk/
Such as, replacing .outer with, playButtonContainer.
The html and the js is the same as yours.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #353198;
/* animation: fadeInBody1 0s ease forwards;*/
}
/*@keyframes fadeInBody1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}*/
/*body*/
.initial-fade {
animation: initial-fade 500ms ease forwards;
}
@keyframes initial-fade {
to {
opacity: 0;
}
}
.initial-fade,
.fadingOut {
cursor: default;
}
.initial-fade .thePlay,
.initial-fade .thePlay * {
pointer-events: none !important;
}
.playButtonContainer {
display: flex;
flex-wrap: wrap;
min-height: 100%;
margin: auto;
justify-content: center;
align-content: center;
width: 290px;
gap: 10px;
animation: fadeInButtons 5s ease 0s forwards;
}
@keyframes fadeInButtons {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*.outer.isOpen {*/
/*display: flex;*/
/*width: auto;*/
/*align-content: stretch;*/
}
/*
.fadingOut .outer {
animation: fadingOut 1s;
animation-delay: 8s;
}
@keyframes fadingOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}*/
.container {
display: flex;
justify-content: center;
position: relative;
/*z-index: 2;*/
}
.container.active {
flex: 1 0 0;
}
/*body*/
.bg1 {
animation: fadeInBody 5s ease 0s forwards;
animation-delay: 0s;
opacity: 0;
}
@keyframes fadeInBody {
100% {
opacity: 1;
}
}
/*body.bg1*/
.with-curtain:before {
content: "";
position: fixed;
/*z-index: 1;*/
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: 165px 165px;
background-image:
linear-gradient(var(--color-a) 5px, #0000 5px);
}
.thePlay:hover {
box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
}
.thePlay:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}
.inner-container {
display: none;
}
/* when container is active hide the svg and show the inner container*/
.container.active .thePlay {
display: none;
}
.container.active .inner-container {
display: flex;
}
.container.active .inner-container.curtain {
display: block;
}
.thePlay {
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: none;
fill: blue;
background: transparent;
padding: 0;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}
.played {
fill: green;
}
button.thePlay {
pointer-events: none;
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47.63px;
height: 47.63px;
cursor: pointer;
border: none;
background: none;
padding: 0;
border-radius: 50%;
animation: fadeInExit 1s forwards 7.5s;
opacity: 0;
pointer-events: none;
clip-path: circle(50%);
}
@keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit svg {
fill: red;
transition: fill 3s ease;
}
.exit:hover svg,
.fadingOut .exit svg {
fill: green;
}
.fadingOut .exit {
animation: fadeOutExit 8s forwards;
pointer-events: none;
opacity: 1;
}
@keyframes fadeOutExit {
to {
opacity: 0;
}
}
.curtain {
position: relative;
max-width: 642px;
margin: auto;
flex: 1 0 0%;
background: #0a0a0a;
border: 20px solid #000;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: calc(50% + 1px);
/* rounding error fix */
top: 0%;
transition: all ease 10s;
/*background-image: url("https://picsum.photos/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
overflow: hidden;
}
.panel-left {
left: 0;
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
.panel-left::before,
.panel-right::before {
content: "";
position: absolute;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
}
.curtain2 .panel-left::before,
.curtain2 .panel-right::before {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");
}
.panel-right::before {
left: -100%;
}
.container.active .curtain .panel-left {
animation: curtain1-open 8s forwards 520ms;
}
@keyframes curtain1-open {
to {
transform: translateX(calc(-100% - 1px));
}
}
.container.active .curtain .panel-right {
animation: curtain2-open 8s forwards 520ms;
}
@keyframes curtain2-open {
to {
transform: translateX(calc(100% + 1px));
}
}
.fadingOut .container.active .curtain .panel-left {
animation: curtain1-close 8s forwards;
}
@keyframes curtain1-close {
from {
transform: translateX(calc(-100% - 1px));
}
to {
transform: translateX(0);
}
}
.fadingOut .container.active .curtain .panel-right {
animation: curtain2-close 8s forwards;
}
@keyframes curtain2-close {
from {
transform: translateX(calc(100% - 1px));
}
to {
transform: translateX(0);
}
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
border: 1px solid #333;
}
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
user-select: none;
}
.hide {
display: none;
}
You can do that in the demo I gave you simply by changing the transition delay on the container and playbuttons so that they wait for each other to finish. You seem to have loaded in a load of old animations in your code so I’m not even going to look further at it.
There should be no cross fade effect in the above demo but if there is you can just tweak the delays on the transitions to suit. I find the fading in and fading out very annoying and the cross fade was a massive improvement. Otherwise you are waiting all day for it to finish.
Note that I also fade the initial background to transparent but that can be removed or change if you want it to remain solid or some other colour.
2 Likes
Animation can’t work with your code, only transition?
If I changed the transition to animation in your code, it won’t work?
My code doesn’t need animation as it does everything that is needed with transitions. Animations would be superfluous unless there was some special reason? The transitions code is about a tenth of the size of code you need for using animations and doesn’t need multiple swapped classes as transitions automatically return to their initial state when the class is removed.
There is no reason for animation code in my example but keyframe animations would still work just as they did in the original. of course they would all need to be different as the structure is different and you are fading different things.
1 Like
In your code the buttons don’t fade-in on page load, how is that added in?
They never really did in your original either.
On initial load you don’t know how long the users computer will take to load the page. On my slow connection the animation was always finished before I saw it.
This is how you would do it in my code.
body {
animation: fadeinbody 5s ease forwards;
opacity: 0;
/*background:#353198;*/
}
@keyframes fadeinbody {
to {
opacity: 1;
}
}
Add in the body background color if you want just the buttons to fade in.
1 Like
That can’t be done using transition, only animation?
Transitions can only happen when something changes from one state to another.
When the page first displays there is nothing changing so nothing can transition. You’d have to use js to add/remove classes so that you could effect a change in property. In this case keyframe is the appropriate tool.
Horses for courses 
1 Like
After clicking an svg, scroll down. https://jsitor.com/CE2H3ukbv
Also, the reason why z-index is used is because there is no display: none;
I can reproduce it inside the codepen code snippet.
