When the svg is clicked you immediately set it to display:none so there is nothing that you can fade. At the same time as you click the svg you start fading in the new background.
Therefore it seems you would have to delay the new background from fading in while you fade the svg page out. The svg could not be display:none as that is not amitable.
That is not a simple task as there is a lot going on in that code right now. You will need to hide the svg using the visibility method, or move them off screen or clip them to zero after the animation has finished. Then you need to delay the new background from fading in too soon.
That’s because the opacity:0 doesn’t get activated for 8 seconds so you see the new background. You would need to set the opacity to zero straight away.
You’d need to delay the new background from being shown while you fade out the play svg (which you won’t be able to use display:none to hide.).
I’m travelling for the next couple of days so can’t offer code but I suggest that you just write down on a bit of paper and work out what happens at each stage. If you can write it down then you can start to see where you can change it to do what you want.
There are so many fade ins and outs that unless you have a clear idea of what is happening and when you click something
Maybe I shouldn’t be placing the fade-in animation to the .thePlay class as that, I believe means adding an animation to each of the 9 svgs separately, which I don’t know is a good idea.
Probably not good, right?
What would your opinion be on this?
I added a red background behind the play svgs to demonstrate the space/area of .outer.
Fading the body out would be easier as you just fade the one element. Then once faded out hide the play svg so they take up no space and then you’d need to fade the body in again with the new background.
Remember the playsvg are in the same containers as each of the videos. That’s why they were display none or one of them would show with the video etc.
It may be that you can do it all in one animation but the change of background image gradient half way through the animation could be problematic.
It’s worth experimenting and see what can be achieved more simply. I can’t offer any code as I am at the airport waiting for a plane:). I’ll be back online tomorrow evening.
I think the problem is that the body is fading out the old background but then you want it to fade in the new background. If it were two separate elements it would be easier perhaps to control but I believe the structure you have now was the only one that satisfied all your other requirements.
I’ll have another look and refresh my memory with the structure again:)
I have been looking at this for the last hour or so and can’t see an easy solution.
The problem is as follows:
When you click the play button the JS adds a class to the body and to the outer but also adds the hide class to all the other containers and instantly removes all the play buttons.
Therefore what really needs to happen is that when you click the play button nothing at all needs to happen until the body animation has faded and then you let the js do what it was doing before and hide and show everything else.
This is similar to what you have done on returning using animationEnd to decide when to remove the class.
I think the approach you need using this structure is when the play button is clicked you add a new class to the body which simply fades out the whole body which will fade the background and the play buttons because they have not been hidden. If you detect for the end of that specific animation you can then remove that new class from the body and add proceed to add the current body and isOpen and hide classes etc…
I did have some success with using CSS only and trying to hide the elements without display:none but it required a number of extra animations and soon got so messy it was just spaghetti.
The simplest answer is to add a new class to the body on click and fade out the page as it stands… Then remove that class and carry on with what you had already. After all its only this first screen you want to fade and it seems silly to complicate everything else just to accommodate this.
If your intentions were known from the start then it would have made sense not to mix the play buttons in with the html for everything else but have them all in a separate container. Of course that is not as semantic as the code at present but would have been easier to manage from a css perspective but maybe more complicated from js as you would have to directly link the buttons to the content they refer to rather than finding them from their context.
Clicking on the play svgs and having them fade out.
That is all I was trying to have happen in the code.
Then, I need to do this:
The simplest answer is to add a new class to the body on click and fade out the page as it stands… Then remove that class and carry on with what you had already.
I mean when you decided to create the page it would have helped to know that there would be fade in animations between screens and in that way the page could have been constructed with that in mind to keep things simple.
If you want to fade one thing in and one thing out then you can’t just switch one off and one on which is basically how this was set up originally.
Yes that would be the simplest method but does mean its mostly a js solution but I believe you already have some sort of animation checking in place which you may be able to re-use.
function coverClickHandler(evt) {
document.body.classList.add('initial-fade');
// this is where you need to check for animation end of the initial fade and return if not finished
return;// needs to be checked
// if we haven't returned we carry on as normal.
hideAll(config.containers);
resetPage();
markAsPlayed(evt.currentTarget);
const cover = evt.currentTarget;
showCovers(cover);
}
The return should be in a function that checks for animation end of that new fade and if not completed then return. Once completed the page will continue as normal.
It was only to show the fading out. You still had code to write
Add the return here and you can see it fades out nicely.
function coverClickHandler(evt) {
document.body.classList.add('initial-fade');
// this is where you need to check for animation end of the initial fade and return if not finished
return;
Now your task is to link to your animation end routine or create a new one if the one you have isn’t accessible from here.
e.g. where the return is you would test for the animationend and check if the classname is initial-fade.
You have something similar for resetfade()
if (animationName === "initial-fade") {
document.body.classList.remove('initial-fade');
carryOn(evt);//
}
That’s just pseudo code you have to write the function properly.
function coverClickHandler(evt) {
document.body.classList.add('initial-fade');
animationEndHandler(evt) ;
}
function carryOn(evt) {
hideAll(config.containers);
resetPage();
markAsPlayed(evt.currentTarget);
const cover = evt.currentTarget;
showCovers(cover);
}
The above is not a woking example as you have to write it properly. You already have done similar so I assume you could follow the original pattern if you can’t use the original.