I have created a Modal, at the bottom of my CV to show various different resources and content creators that I have used to learn how to code, I have nearly finished this project and will be sending it out to companies maybe in the next few months. This modal animates in and out of the page by sliding down and blurring aswell as changing the opacity and using a filter with a hue rotate. This code works fully as I intend it to Although I have still not tested it on Chrome, opera or Safari(seeing as I don't have a Mac or IPhone). I have a couple of concerns which I thought I'd add to the post as thats what the 'How to ask a good question' guide said could be included.
My Html is here:
<section id="Mentors">
<p>Mentors, Teachers & External Resources.</p>
<img class="close_btn_png"
src="Resources/imgs/Pngs/Close.png"
width="600" height="600"
type="image/png">
<div class="circ_con"><br><br></div>
<p>Without these peoples contributions and Tutorials,<br>
I would not have been able to learn How to Code,<br>
or at-least it would have taken me about 20x longer.</p>
</section>
<img class="btm_help_ico" src="Resources/imgs/Pngs/help.png" width="16" height="16">
I've not included my full html as that would be far to long. My Css is Here:
#Mentors{
display:block;
position:absolute;
width:100vw; height:18vh;
font-family:'Fondamento',cursive;
bottom:0 !important; left:0px;
border-top:dotted 4.8px yellow;
background-image:linear-gradient(-33deg,
rgba(16, 227, 223,1),
rgba(5, 158, 158,1),
rgba(2,59,42,1),
rgba(2,59,42,1));
z-index:5000;
will-change:auto;
}
#Mentors::before{
content:"";
display:block;
position:absolute;
width:100vw; height:18vh;
filter:opacity(0.5) hue-rotate(22deg) blur(0.8px);
bottom:0 !important; left:-2.875px;
border-top:dotted 4.8px yellow;
background-image:linear-gradient(-123deg,
blue,
rgba(16, 227, 223,1),
rgba(5, 158, 158,1),
rgba(2,59,42,1),
rgba(2,59,42,1),
green);
z-index:5001;
}
#Mentors p{
z-index:5002;
transform:translateZ(200px);
filter:blur(0.44px);
text-shadow:1px 1px 1px teal;
}
.close_btn_png{
position:absolute;
cursor: pointer;
transform:scale(0.07);
top:-275px; right:-268px;
filter:blur(9.77px);
z-index:5002;
}
.btm_help_ico{
position:absolute;
bottom:8px;
right:8px;
z-index:5555;
}
My Javascript is here:
const Ment = document.getElementById("Mentors");
const CloseBtn = document.getElementsByClassName("close_btn_png")[0];
const BtmHelpBtn = document.getElementsByClassName("btm_help_ico")[0];
BtmHelpBtn.addEventListener("click",(function(){
Ment.animate({
transform: ['translateY(300px)', 'translateY(0px)'],
filter: ['blur(2.2px) hue-rotate(180deg) opacity(0.74)',
'blur(0px) hue-rotate(0deg) opacity(1)']
},{
duration: 2333.3333333333333333333333333333,
easing: 'ease-in-out',
iterations: 1,
}).then(setTimeout(()=>{
Ment.style.display = "block";
BtmHelpBtn.style.display = "none";
}, 2748));
}))
CloseBtn.addEventListener("click",(function(){
// let MenState = `Clicked`;
Ment.animate({
transform: ['translateY(0px)', 'translateY(300px)'],
filter: ['blur(0px) hue-rotate(0deg) opacity(1)',
'blur(2.2px) hue-rotate(180deg) opacity(0.74)']
},{
duration: 2746,
easing: 'ease-in-out',
iterations: 1,
}).then(setTimeout(()=>{
Ment.style.display = "none";
BtmHelpBtn.style.display = "block";
}, 2748));
}));
My Concerns Are:
1) although the code is working, Firefox is giving an error in the console saying:
....TypeError: Ment.animate(...).then is not a function. Although its giving an error its still doing exactly what I asked it to do which is remove the help Icon after the animation has completed. So I'm a bit confused.
I tried Chaneing the .then() on there sometime last week & it did not work, then I retried it again Today & it started working. So is this Valid Syntax or is it not very good practice? is there a better way to do this.
2) Can this code be optimized, I included Will-Change:auto; into my Css and it seemed to make it run a bit smoother, but when viewing the performance tab in Firefox developer edition there is still alot of paints and re-calculating Styles. Not sure if its worth me posting a screen shot of the performance tree if that would help anyone viewing this post.
3) is more of a question than a concern, do animations run smoother if you keep to multiples of 16ms? as 1000ms(1s) / 60 = 16.6SumNumberofSix'sThenA7 Was just wondering if perfomance wise(Wther there a good rule of thumb) or is it totally arbitrary and doesn't matter in the slightest?
I would ask if this code can be shorter but since I'm almost a complete novice or beginner I'm guessing the answer to this is most definately yes.
Can anyone suggest any edits or ways to improve this code. Currently runs at between 22fps and 60fps, 20 being when You click multiple buttons. considering my last project the worst was like 4fps I think the .animate() api is a step forward, in the right direction. I think Another Aspect that is affecting the fps at there lowest is the fact that the page has a rotating Carousel animation which is constant and two hd marble gifs which are animating also. these will be optimized on there own when I get round to it.
One optimization I can think of myself is to resize the Close Button Png myself, in Gimp Photo manipulation instead of having the page do this via transform Scale its currently (600x600px) which is huge, scaling down to about 40px & then maybe Convert it to a WebP image.
Can Anyone suggest some good references or articles/tutorials about Vanilla Javascript .animate() API, there doesn't seem to be a whole lot of documentation on this[When I first Searched], mainly the JQuery version & the MDN article does not cover much about hover effect glitches, timing or optimizations. If I do find any resources regarding this I will add them at the bottom here for other peoples reference. I have been switching all of my Css Animations over to .animate() but the timings of the hover states are being very difficult to get right, If your an expert at these please make a youtube tutorial series.
Csswg.com ~ web Animations Api
Just Found this which might solve some of my issues or concerns.
docs.w3cub.com ~ animationPlayState
Any other pointers would be greatly appreciated.
