Develop Reference

mobile view of website does not scroll, I have tried every overflow and overflow-scrolling variation I've seen on slack so far

#media screen and(max-width: 414px) {
html {
overflow-x: initial !important;
-webkit-overflow-scrolling: touch;
}
/*nav-bar-desktop*/
.mainNav {
display: none;
}
/*nav-bar-mobile*/
.page-header {
background: #322759;
width: 100%;
height: 20%;
position: fixed;
.logo {
display: none;
}
.mobile-logo {
display: block;
position: fixed;
width: 35%;
margin-top: -65px;
margin-left: -40px;
}
.nav-bar {
position: absolute;
z-index: 0;
margin-top: -1000px;
}
.page-header-links {
z-index: 0;
}
}
.nav-bar-mobile {
position: relative;
display: block;
}
.nav-bar-mobile button {
position: fixed;
right: 40px;
top: 40px;
z-index: 2;
cursor: pointer;
background: transparent;
border: none;
}
.menuNav {
overflow-y: none;
list-style: none;
top: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 0;
overflow: hidden;
max-width: 414px;
margin: 0;
touch-action: none;
text-align: center;
}
.menuNav.showMenu {
width: 100%;
right: 0px;
height: 100vh;
padding-top: 200px;
position: fixed;
background: #322759;
.mobile-nav-monster {
position: fixed;
left: 0;
bottom: 0;
width: 50vw;
justify-content: flex-start;
}
}
.nav-tabs {
padding: 20px;
border-bottom: none !important;
text-decoration: none;
color: #D9D8D8;
}
.menuNav:link {
color: #D9D8D8;
}
.menuNav:visited {
color: #D9D8D8;
}
.menuNav:active {
color: #E87DA6;
}
.hamburger-close {
color: #FFFFFF;
width: 40px;
height: 40px;
margin-top: 10px;
transform: scale(1.7);
}
.hamburger-open {
color: #FFFFFF;
width: 40px;
height: 40px;
margin-top: 10px;
transform: scale(1.7);
}
.page-triangle-banner {
vertical-align: top;
height: 200px;
margin-top: 100px;
}
.mobile-break {
display: block !important;
}
.desktop-break {
display: none !important;
}
}
this is my css styling sheet for the mobile nav menu^^^^
<nav className="nav-bar-mobile">
<button onClick={handleToggle}>
{navbarOpen ? (
<MdClose className="hamburger-close" />
) : (
<FiMenu className="hamburger-open" />
)}
</button>
<ul className={`menuNav ${navbarOpen ? " showMenu" : ""}`}>
<NavLink
exact
to="/"
className="nav-tabs"
activeStyle={{ color: "#E87DA6" }}
activeClassName="active-link"
onClick={() => closeMenu()}
>
<p
style={{
fontFamily: "roboto",
fontSize: "30px",
fontWeight: "700",
lineHeight: "18px",
letterSpacing: "0.15px",
}}
>
Home
</p>
</NavLink>
<NavLink
exact
to="/about"
className="nav-tabs"
activeStyle={{ color: "#E87DA6" }}
activeClassName="active-link"
onClick={() => closeMenu()}
>
<p
style={{
fontFamily: "roboto",
fontSize: "30px",
fontWeight: "700",
lineHeight: "18px",
letterSpacing: "0.15px",
}}
>
About
</p>
</NavLink>
<NavLink
exact
to="/team"
className="nav-tabs"
activeStyle={{ color: "#E87DA6" }}
activeClassName="active-link"
onClick={() => closeMenu()}
>
<p
style={{
fontFamily: "roboto",
fontSize: "30px",
fontWeight: "700",
lineHeight: "18px",
letterSpacing: "0.15px",
}}
>
Team
</p>
</NavLink>
<NavLink
exact
to="/resources"
className="nav-tabs"
activeStyle={{ color: "#E87DA6" }}
activeClassName="active-link"
onClick={() => closeMenu()}
>
<p
style={{
fontFamily: "roboto",
fontSize: "30px",
fontWeight: "700",
lineHeight: "18px",
letterSpacing: "0.15px",
}}
>
Resources
</p>
</NavLink>
<img src={monster} alt="blue-monster" className="mobile-nav-monster" />
</ul>
</nav>;
this is my jsx file for the mobile nav menu ^^^
I've looked through forums to test setting my overflow to initial or auto or none and other such overflow-scrolling settings. But it doesn't work in production. My local host does not pick up on these problems so it is hard to test since everytime I have to run the build and push it into production to see the issue.
More insight into this issue might be the fact that there are two vertical scroll bars that I cannot figure out where they come from. The first scroll bar is big and seems to be the reason it prohibits scrolling. The second scroll bar is small and only appears after you are at the bottom of the page.

Try removing the footer position and z-index.
footer {
background: top / cover no-repeat url(./images/footer-background-short.png);
padding: 3% 8%;
background-color: rgb(50, 40, 89);
color: white;
width: 100%;
}

React CSS - filter: drop-shadow strange behaviour in Safari, mac. Does not work properly

I'm finishing my react application of an todo list which is almost ready, just need to fix bugs in safari, of course.
As you can see in the gif, when you hover the cursor over the browser (it has no hover effects of any kind), the png image has that behaviour that produces that annoying marking.
This does not happen in other browsers, only in safari, my suspicion is that filter: drop-shadow() is not supported in safari, even though can i use says it is. https://caniuse.com/?search=filter%3A%20drop-shadow
On the other hand, the browser is a completely unrelated component to the png image being displayed, so I don't know why the image is displayed like that when hovering.
My image and browser css code is as follows:
image:
.notes-empty-img{
width: 300px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
position: relative;
top: 100px;
}
.notes-empty-img img{
filter: drop-shadow(0 0 40px #00c9a7);
max-width: 100%;
object-fit: cover;
}
#media (min-width: 768px) {
.notes-empty-img{
width: 600px;
}
}
search engine
#import url('https://fonts.googleapis.com/css2?family=Blaka&family=Comic+Neue:wght#300;400;700&family=Montserrat:wght#100;300;400;500;600;700;900&family=Permanent+Marker&display=swap');
.search{
width: 100%;
margin: 2rem auto;
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-direction: column;
}
.input-wrapper{
position: relative;
width: 80%;
display: flex;
align-items: center;
}
.search input{
width: 100%;
padding: 1rem;
border-radius: 10px;
outline: none;
border: none;
box-shadow: 0 0 2px black;
background-color: rgb(1, 1, 1, .8);
color: white;
}
.search input::placeholder{
color: rgb(188, 188, 188);
font-family: 'Montserrat', sans-serif;
}
.icon{
font-size: 1.8rem;
cursor: pointer;
}
.search-icon{
color: #585858;
position: absolute;
right: 10px;
}
#media (min-width: 668px) {
.search{
flex-direction: row;
gap: 2.5rem;
width: 90%;
}
.input-wrapper{
width: 40%;
}
}
.boxInput:before {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(129deg, #845ec2 0%, #00c9a7 100% );
transform: translate3d(0px, 0px, 0) scale(1.05);
filter: blur(8px);
opacity: var(0.7);
transition: opacity 0.3s;
border-radius: inherit;
}
/*
* Prevents issues when the parent creates a
* stacking context. (For example, using the transform
* property )
*/
.boxInput::after {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
border-radius: inherit;
}
I also share with you the jsx structure of the components
Component Search.js
//import React, { useState } from 'react'
import {MdSearch, MdAdd} from 'react-icons/md'
import '../styles/Search.css'
const Search = ({ handleSearchNote, setShowNote }) => {
// const [showNote, setShowNote] = useState(true)
const handleShowAddNote = () => {
/* By default in css, addnotes has a display none */
if (setShowNote){
let addNote = document.querySelector('.new');
let img_initial = document.querySelector('.notes-empty-img');
if (img_initial != null){
img_initial.style.display='none'
}
addNote.classList.add('wobble-horizontal-top')
addNote.style.display='flex';
document.querySelector('.notes-list').style.display='none';
if (document.querySelector('.pagination') != null){
document.querySelector('.pagination').style.display='none';
}
}
}
return (
<div className='search'>
<div className="input-wrapper boxInput">
<MdSearch
className='icon search-icon'
/>
<input
type="text"
placeholder='What note are you looking for?'
onChange={(event) => handleSearchNote(event.target.value) }
/>
</div>
<div className="btn-wrapper-search boxBTN">
<button
className='btn-addNote'
onClick={handleShowAddNote}>
New Note
</button>
<MdAdd
className='icon add-icon'
/>
</div>
</div>
)
}
export default Search
Component App.js, where the image is rendered
return (
<>
<div className="container">
<Header />
<Search
handleSearchNote={setSearchText}
setShowNote={setShowNote}
/>
{notes.length===0 &&
<div className="notes-empty-img">
<img src={srcImage} alt="paperImg" />
</div>
}
<Pagination
data={filterNotes}
handleAddNote={addNote}
handleDeleteNote={deleteNote}
searchText={searchText}
/>
<Footer />
</div>
</>
)
A small note, the effect of the gradient shadows in the search engine and in the add notes button, is not a box-shadow, it is made with this tool by Álvaro Trigo https://alvarotrigo.com/shadow-gradients/. I don't know if it can generate conflicts in any way.
A greetings and thanks in advance!

Locomotive Scroll - switching from horizontal to vertical and back

I am using Locomotive-Scroll (https://locomotivemtl.github.io/locomotive-scroll/) for smooth and horizontal scrolling, it's easy and works well. However, I'd like to integrate a section of vertical scrolling as well.
Visual Explanation
I've tried lots of things, none of which works entirely. I face mostly three issues:
I don't understand why my solution works to a certain extent and I cannot find any tutorial on locomotive-scroll going further than adding the data-scroll property
I didn't find a way to change the vertical scroll direction from downwards to upwards
If I resize the window, locomotive scroll brakes and can only be restored by a reload
My current solution (I would consider myself a beginner):
const scroller = new LocomotiveScroll({
el: document.querySelector('#scrollable'),
smooth: true,
direction: 'horizontal'
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', sans-serif;
font-size: 2vh;
}
.section {
height: 100vh;
}
#section-one {
width: 100vw;
}
#section-two {
width: 400vh;
background-color: blanchedalmond;
}
#section-three {
width: 100vw;
}
.heading {
font-size: 5rem;
font-weight: 500;
text-transform: uppercase;
}
.home__statement {
width: 100vw;
position: relative;
}
.heading.one {
position: absolute;
left: 10vw;
top: 25vh;
}
.heading.two {
position: absolute;
left: 10vw;
top: 35vh;
}
.heading.three {
position: absolute;
left: 10vw;
top: 45vh;
}
#sticky-container{
width: 100vw;
height: 100vh;
background-color: cadetblue;
}
.vertical-canvas {
position: absolute;
top: -300vh;
height: 400vh;
width: 100vw;
background-image: linear-gradient(red, yellow);
}
.example-1 {
height: 50%;
width: 100vw;
background-color:rgba(175, 18, 18, 0.3);;
}
.elem {
width: 100px;
height: 100px;
background-color: cornsilk;
}
.example-2 {
height: 25%;
width: 100vw;
background-color: rgba(46, 165, 46, 0.3);
}
.example-3 {
height: 25%;
width: 100vw;
background-color: rgba(75, 92, 168, 0.3);
}
<div id="scrollable" data-scroll-container>
<section class="section" id="section-one" data-scroll-section>
<div class="home__statement">
<span class="heading one" id="statement__line-one">Some text blabla</span>
<div>
</section>
<section class="section" id="section-two" data-scroll-section>
<div id="sticky-container"
data-scroll
data-scroll-sticky
data-scroll-target="#section-two"
data-scroll-speed="-1">
<div class="vertical-canvas"
data-scroll
data-scroll-sticky
data-scroll-target="#section-two"
data-scroll-direction="vertical">
<div class="example-1" id="ex1">
<div class="elem"></div>
</div>
<div class="example-2"></div>
<div class="example-3"></div>
</div>
<div>
</section>
<section class="section" id="section-three" data-scroll-section>
<div class="home__statement">
<span class="heading one" id="statement__line-one">Some text blabla</span>
<div>
</section>

You Can't initialize both Horizontal Scroll and Vertical Scroll within the same
[data-scroll-container]
For the things you want to achieve, you can do with gsap scrollTrigger
but you have to implement scrollTrigger with locmotive
Than You can do whatever effect you want

Loading Animation and grayed-out background not working

I just want to have a loading animation with grayed-out background upon clicking TestLoading button. But I can't get it right. The loading gif is slightly in the left side but I want it in the center. Also grayed-out background is not working.
Here's my css:
.divLoader {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(67, 71, 75);
z-index: 30001;
opacity: 0.8;
}
.divLoaderContent {
position: absolute;
color: White;
top: 50%;
left: 40%;
}
In my view, I have this:
<!--LOADER -->
<div id="divProcessing" class="divLoader">
<p class="divLoaderContent"><img src="~/Content/image/blocks.gif"></p>
</div>
and
$('#btnRoster1').click(function(e) {
$("#divProcessing").show();
});

Here is revised version of css:
.divLoader{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(67, 71, 75, 0.8);
z-index: 30001;
}
.divLoaderContent{
position: absolute;
color: White;
top: 50%;
left: 0;
right: 0;
margin: auto;
transform: translateY(-50%);
}
And don't use p tag for img container. Use div instead

To animate .show() use
$('#btnRoster1').click(function(e) {
$("#divProcessing").show(800);
});
where 800 is 0.8 sec.
To align the gif you can use flex and get rid of absolute positioning:
.divLoaderContent {
color: White;
display: flex;
justify-content: center;
}

Moving elements (especially img tags) with top/left based on percentages can get messy because it depends on the img size. I recommend using flex with this approach. The justify-content will center the children horizontally and align-items will center vertically when display is flex
.divLoader {
margin: 0px;
padding: 0px;
position: fixed;
right: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(67, 71, 75);
z-index: 30001;
opacity: 0.8;
display: none;
justify-content: center;
align-items: center;
}
Then have your js just modify display in css to flex when you want it to show, then display: none when you want it to hide;
$('#btnRoster1').click(function(e) {
$("#divProcessing").css('display', 'flex');
});
Fiddle below (has a timeout after 3 seconds to simulate something loading) I took out the unnecessary <p> tag as well.
https://jsfiddle.net/Garrito/vh2ttmu9/35/

ScrollMagic pin is not working in TimelineMax

I am new to ScrollMagic but loving it.
So I have a Timeline which bring together the parts of an airplane together to form an airplane.I intend to change the tweened parts of the airplane to a single image of the entire plane and then pin the single image.
I have managed to get the parts of the plane together but not sure how to proceed.
Any clue how to achieve this?
This is the fiddle of what I've achieved till now
HTML -
<section class="intro-container"></section>
<section class="airplane-container">
<div id="plane-left-wing"></div>
<div id="plane-right-wing"></div>
<div id="plane-propeller-left"></div>
<div id="plane-propeller-right"></div>
<div id="plane-body"></div>
<div id="plane-tail"></div>
</section>
<!--/airplane-container-->
JS -
var controller = new ScrollMagic.Controller();
var airplane_tween = new TimelineMax()
.to("#plane-left-wing", 1, {left:"50%" , top:"-150px" },0)
.to("#plane-right-wing", 1, {right:"50%" , top:"-150px"},0)
.to("#plane-body", 1, {top:"-250px"},0)
.to("#plane-tail", 1, {top:"-404px" },0.5)
.to("#plane-propeller-left", 1, {left:"50%" , top:"-230px" },0.5)
.to("#plane-propeller-right", 1, {right:"50%" , top:"-230px"},0.5);
var scene1 = new ScrollMagic.Scene({triggerElement: ".airplane-container" , duration: 300})
.setTween(airplane_tween)
// .setPin("#airplane-pin")
.addIndicators({name: "airplane"}); // add indicators (requires plugin)
// Add Scenes to ScrollMagic Controller
controller.addScene([
scene1
]);
CSS -
* {
margin: 0;
padding: 0;
}
html, body {
margin: 0;
height: 100%;
background: #ededed;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a.active {
color: #ededed;
}
.intro-container {
width: 100%;
height: 700px;
float: left;
background: #ffd134;
}
.airplane-container {
width: 100%;
/*height: 900px;*/
overflow: hidden;
float: left;
background: #678ecf;
background: rgba(103, 142, 207, 0.9) url(../images/top-view.jpg) no-repeat;
}
#plane-left-wing {
margin: 300px auto auto -252.5px;
position: relative;
float: left;
width: 231px;
height: 92px;
background: url(../images/plane-left-wing.png) no-repeat;
}
#plane-right-wing {
margin-top: 300px;
margin-right: -252.5px;
position: relative;
float: right;
width: 231px;
height: 92px;
background: url(../images/plane-right-wing.png) no-repeat;
}
#plane-propeller-left {
margin: 300px auto auto -130px;
position: relative;
float: left;
width: 92px;
height: 149px;
background: url(../images/plane-propeller-left.png) no-repeat;
}
#plane-propeller-right {
margin: 300px -130px auto auto;
position: relative;
float: right;
width: 92px;
height: 149px;
background: url(../images/plane-propeller-right.png) no-repeat;
}
#plane-body {
margin: 300px auto 0 auto;
position: relative;
z-index: 500;
width: 54px;
height: 333px;
background: url(../images/plane-body.png) no-repeat;
}
#plane-tail {
margin: 100px auto 0 auto;
position: relative;
width: 184px;
height: 52px;
background: url(../images/plane-tail.png) no-repeat;
}
This is a fiddle of the same -
http://jsfiddle.net/joystan/x2f0atdj/

try out this approach:
Put image of plane in document and give it opacity: 0
Once you have it on stage, give it same position, width, height, so on, so on, to fit where you want it
make plane image opacity: 1, and than make parts opacity: 0
That's it, if you want plane image to be pinned, just put position: fixed on it, you don't need to make it pin
P.S. Don't forget to keep animating margins not left, top, bottom, right position
Cheers