So basically I have problem wherein I try to make animation in my scroll animation using scrollMagic..My codes are written in reactjs but I don't know why it is not working like the same in normal html javascript and css.. Here is the codes.
import React, { useEffect, useLayoutEffect } from 'react'
import img from './images/Apple-Logo.png'
import ScrollTrigger from 'gsap/ScrollTrigger'
import ScrollMagic from 'scrollmagic'
import {Power3,gsap,TweenMax, TimelineMax} from 'gsap'
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";
import a1 from './images/a1.jfif'
import a2 from './images/a2.jfif'
import a3 from './images/a3.jpg'
import a4 from './images/a4.jfif'
import a5 from './images/a5.jfif'
function Home() {
useLayoutEffect(() => {
ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax)
const controller = new ScrollMagic.Controller()
const tl = new TimelineMax()
tl.from('.box-screener',1,{opacity:0,x:"45%",ease:"none"})
tl.to('.box-screener',0.5,{opacity:1,x:"70%",ease:"none"})
const scene = new ScrollMagic.Scene({
triggerElement:".falling-categories-absolute",
triggerHook:"onLeave",
duration:"100%"
})
.setPin('.falling-categories-absolute')
.setTween(tl)
.addTo(controller)
},[])
return (
<div className='home'>
<div className="falling-categories-absolute">
<div className="products-title">
<h2> Products </h2>
</div>
<div className="box-screener"></div>
</div>
<div className="LowerBound">
</div>
</div>
)
}
export default Home
And for the css it is something like this
.home {
/* position: relative; */
/* overflow: hidden; */
display: block;
height: 100%;
}
.LowerBound {
width: 100%;
height: 100vh;
background: rgba(128, 128, 128, 0.233);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.falling-categories-absolute {
/* width: 100%; */
background: orange;
height: 100vh;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.products-title {
position: absolute;
top: 30%;
left: 20%;
z-index: 1000;
font-size: 45px;
font-style: italic;
}
.box-screener {
position: absolute;
width:200px;
height:200px;
background: black;
top: 45%;
left: 45%;
transition: all 0.5s ease-in-out;
}
The wrong about here is somewhere in my useLayoutEffect() in the part of setPin wherein I don't know why when I scroll down will not follow up the scroll..but only stop's when the scrolldown is done in that one section.
To point it out this is the thing that I'm following but it doesn't work properly in react and I don't know why T_T..This is really pain in my ass I've been troubling with scrollTrigger and scrollMagic because scrollTrigger don't have a scroll that will not move the section until the scroll is done on that part..Anyway this is the code in the part of normal html
var tl = new TimelineMax({onUpdate:updatePercentage});
var tl2 = new TimelineMax();
const controller = new ScrollMagic.Controller();
tl.from('blockquote', .5, {x:200, opacity: 0});
tl.from('span', 1, { width: 0}, "=-.5");
tl.from('#office', 1, {x:-200, opacity: 0,ease: Power2.easeInOut}, "=-1");
// tl.to('span', 1, { width: "50%"}, "=-.5");
tl.from('#building', 1, {x:200, opacity: 0, ease: Power2.easeInOut}, "=-.7");
tl2.from("#box", 1, {opacity: 0, scale: 0});
tl2.to("#box", .5, {left: "20%", scale: 1.3, borderColor: 'white', borderWidth: 12, boxShadow: '1px 1px 0px 0px rgba(0,0,0,0.09)'})
const scene = new ScrollMagic.Scene({
triggerElement: ".sticky",
triggerHook: "onLeave",
duration: "100%"
})
.setPin(".sticky")
.setTween(tl)
.addTo(controller);
const pogi = []
const scene2 = new ScrollMagic.Scene({
triggerElement: "blockquote"
})
.setTween(tl2)
.addTo(controller);
function updatePercentage() {
//percent.innerHTML = (tl.progress() *100 ).toFixed();
tl.progress();
console.log(tl.progress());
}
#import url("https://fonts.googleapis.com/css?family=Arapey");
body {
margin: 0;
font-family: "Arapey";
}
body h1 {
font-size: 2em;
text-align: center;
margin-top: 30%;
}
section {
padding: 3em;
height: 100vh;
position: relative;
box-sizing: border-box;
}
section blockquote {
font-size: 2.3em;
width: 30%;
margin-top: 17%;
position: absolute;
}
section blockquote span {
width: 100%;
background: red;
display: block;
height: 5px;
margin-top: 20px;
}
section img {
position: absolute;
}
section img:nth-of-type(1) {
width: 40%;
right: 0;
top: 20%;
}
section img:nth-of-type(2) {
width: 25%;
right: 40%;
top: 29%;
margin-top: 15%;
}
section:nth-child(odd) {
background: #f1f1f1;
}
.sticky {
background: white !important;
}
#box {
width: 100px;
height: 100px;
position: absolute;
border: 5px solid lightgray;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
<title>Document</title>
</head>
<body>
<section>
<h1>Scroll down</h1>
</section>
<section class="sticky">
<blockquote>"You should totally subscribe to my channel now"<span></span></blockquote>
<img id="office" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/office1.png">
<img id="building" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2621168/sky.jpg">
<div id="box"></div>
</section>
<section>
<h1>Scroll up</h1>
</section>
<script src="./index.js"></script>
</body>
</html>
First of all
Please be sure to use the newest GSAP version (3+) - this looks like pretty old code
Second
If possible I strongly suggest using
https://greensock.com/docs/v3/Plugins/ScrollTrigger
Which is built to work with GSAP and does the same thing ScrollMagic does - this should eliminate all legacy related issues and will make your code bulletproof
Related
I'm trying to make a simple close button for my electron application.
But for some reason document.querySelector('*') doesn't work for the top bar of my application..
And even if I manage to select specifically the div that is in charge of the close button, the click event listen doesn't fire..
here is my main.js:
const path = require('path')
require('electron-reload')(__dirname);
const createWindow = () =>{
const win = new BrowserWindow({
width: 400, // width = 400
height: 600, // height = 600
frame: false,
opacity: 0.98,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
//win.webContents.openDevTools();
win.setResizable(false);
win.loadFile('index.html')
// add button check
ipcMain.on('exit-app', () => {
console.log('clicked on something')
})
}
app.whenReady().then(() => {
createWindow()
})
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') app.quit()
})
here is my index.html:
<link rel="stylesheet" href="./styles.css">
<html>
<div class="titlebar">
<div class="buttons">
<p id="text">Omer's Electron Application</p>
<div id="close"> </div>
<div id="minimize"> </div>
</div>
</div>
<head>
<title>
Omer's Electron Application
</title>
</head>
<script src="./index.js"></script>
</html>
here is my preload.js:
const {ipcRenderer} = require('electron')
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('*').addEventListener('click', ()=>{
ipcRenderer.send('exit-app')
})
})
here is my styles.css:
#import url('https://fonts.googleapis.com/css2?family=Roboto+Serif');
* {
background-color: #525252;
margin: 0;
padding: 0;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
font-size: 18px;
font-family: 'Roboto Serif', serif;
}
.titlebar *{
background-color: #414141;
height: 40px;
-webkit-app-region: drag;
position: fixed;
}
#text{
position: fixed;
left: 50px;
top: 10px;
height: 10px;
color: #e0e0e0;
}
.buttons > div {
width: 25px;
height: 25px;
border-radius: 50%;
text-align: center;
position: fixed;
left: 370px;
top: 7px;
}
.buttons > #close{
background-color: #eb5a55;
}
.buttons > #minimize{
background-color: #f4bb40;
position: fixed;
left: 340px;
}
I bumped into this thread randomly and found the answer I was looking for !
Change Cursor on Draggable region in Electron
Unfortunately setting -webkit-app-region: drag; disables all click and mouse events because it's treated as a title-bar so you can't change the cursor.
I would include where I read that but I can't find it anymore.
See:
#1354 -webkit-app-region: drag eats all click events
#8730 Frameless Electron App not work css cursor:pointer
So apparently after removing -webkit-app-region: drag the issue was fixed and all mouse events worked like magic !
If there are multiple jquery draggable divs I want to see guides and snap to guides, edges and corners of others divs.
Here's the code:
$(".draggable").draggable();
$(".draggable").resizable();
body {
font-family: courier new, courier;
font-size: 12px;
}
.draggable {
border: 1px solid #ccc;
width: 100px;
height: 80px;
cursor: move;
position: relative;
}
.guide {
display: none;
position: absolute;
left: 0;
top: 0;
}
#guide-h {
border-top: 1px dashed #55f;
width: 100%;
}
#guide-v {
border-left: 1px dashed #55f;
height: 100%;
}
#image{
height: 150px;
width: 200px;
}
img{
width: 100%;
height: 100%;
}
#image_h {
position: absolute;
color: white;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>
<div class="draggable">drag me!</div>
<div class="draggable">you can drag me too, if you like</div>
<div class="draggable">hep hep</div>
<div class="draggable" id="image">
<img src="https://cdn.pixabay.com/photo/2021/02/06/16/29/jay-5988657__340.jpg">
<div id="image_h">
Hello
</div>
</div>
<div id="guide-h" class="guide"></div>
<div id="guide-v" class="guide"></div>
The blue line in following image is what i want to be shown while divs are being dragged
see image here. Divs should snap to the blue guiding lines when divs are aligned.
don't change the relative and absolute position of classes as I've used them to overlay one div on another.
I tried searching online but solutions are too old, awakward and work with jquery 2.x
Please help!
To address the first part of your question, you can manage the guides like so.
$(function() {
function moveGuides(top, left) {
$("#guide-h").css("top", top + "px");
$("#guide-v").css("left", left + "px");
}
function getMyCorners(el) {
var p = $(el).position();
return {
top: p.top,
left: p.left,
bottom: p.top + $(el).height(),
right: p.left + $(el).width()
};
}
function startGuides(targetEl) {
var c = getMyCorners(targetEl);
moveGuides(c.top, c.right);
$(".guide").show();
}
function stopGuides() {
$(".guide").hide();
}
$(".draggable").draggable({
start: function(e, ui) {
startGuides(this);
},
drag: function(e, ui) {
var c = getMyCorners(this);
moveGuides(c.top, c.right);
},
stop: stopGuides
});
$(".draggable").resizable({
start: function(e, ui) {
startGuides(this);
},
resize: function(e, ui) {
var c = getMyCorners(this);
moveGuides(c.top, c.right);
},
stop: stopGuides
});
});
body {
font-family: courier new, courier;
font-size: 12px;
}
.draggable {
border: 1px solid #ccc;
width: 100px;
height: 80px;
cursor: move;
position: relative;
}
.guide {
display: none;
position: absolute;
left: 0;
top: 0;
}
#guide-h {
border-top: 1px dashed #55f;
width: 100%;
}
#guide-v {
border-left: 1px dashed #55f;
height: 100%;
}
#image {
height: 150px;
width: 200px;
}
img {
width: 100%;
height: 100%;
}
#image_h {
position: absolute;
color: white;
top: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<div class="draggable">drag me!</div>
<div class="draggable">you can drag me too, if you like</div>
<div class="draggable">hep hep</div>
<div class="draggable" id="image">
<img src="https://cdn.pixabay.com/photo/2021/02/06/16/29/jay-5988657__340.jpg">
<div id="image_h">
Hello
</div>
</div>
<div id="guide-h" class="guide"></div>
<div id="guide-v" class="guide"></div>
With helper functions, you can reveal the guides, and move them based on specific events.
The next, and much more involved portion, would be to create collision detection for the various elements. This will require checking against each of the elements involved against all the other elements. For example:
if($("#guide-h").position().top == $(".draggable").position().top){
// Stop event
}
I am guessing that you are looking to create alignment. So when a Guide collides with an edge, it should prevent the User from dragging or resizing the element further in that direction. Also, do you want it to Snap and what tolerance should that snap be?
Since you did not provide those details, I am not really able to address your second question in full.
I am new to Javascript and CSS. I have a div that will contain an image. The below code, I pieced it together after watching some YouTube videos and going over some documentation, however I am sure that this is not the right code.
https://jsfiddle.net/0hp97a6k/
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div {
margin: 0;
}
.headerspace {
width: 100%;
height: 20px;
background-color: white;
}
.header {
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
}
.logo {
width: 200px;
height: 200px;
background-color: red;
margin-top: 50px;
margin-left: 50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="headerspace"></div>
<div class="header">
<div class="logo" id="logoid">
</div>
</div>
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function() {
var value = window.scrollY;
logo.style.marginleft = value * 0.5 + 'px';
})
</script>
</body>
</html>
How do I set the left margin based on scroll?
Also can scroll based properties be applied to two margins, say top and right at the same time?
marginleft should be marginLeft in your javascript
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
})
</script>
And then if you want to edit the left and top you can do the following
<script type="text/javascript">
let logo = document.getElementById("logoid");
window.addEventListener('scroll', function(){
var value = window.scrollY;
logo.style.marginLeft = value * 0.5 + 'px';
logo.style.marginTop = value * 0.5 + 'px';
})
</script>
To make sure the logo element goes back where it started you should edit the css like this
* {
margin: 0;
padding: 0;
}
body {
background-color: powderblue;
height: 2000px;
padding: 0 0;
}
div{
margin: 0;
}
.headerspace{
width: 100%;
height: 20px;
background-color: white;
}
.header{
width: 100%;
height: 300px;
background-color: maroon;
display: flex;
padding-top: 50px;
padding-left: 50px;
}
.logo{
width: 200px;
height: 200px;
background-color: red;
}
I have removed the margin from .logo because that will be overwritten and added those values as padding to the parent (.header)
to my understanding, .onclick, should work each time I click the button, however this is only working once. This is my code so far
var left = document.getElementById("left");
left.onclick = moveLeft;
function moveLeft() {
var box = document.getElementById("box1");
var pos = 200;
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>
like I said, it works, but only once, it shifts the box to the left one square, but it shouldn't stop until after 5 squares.
please help...
The first answer is right, your pos variable revalue to 200 when you click your button everytime.
So it is just from 200 to 250 everytime.it look like same everytime.
try like this:
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
That is because your pos variable is defined inside the moveLeft function. Every time the function is executed, the pos is always 200. Define it outside the moveLeft function.
Either make pos global as in below snippet.
Or set it dynamically within the function.
var left = document.getElementById("left");
left.onclick = moveLeft;
var pos = 200;
function moveLeft() {
var box = document.getElementById("box1");
if (pos < 500) {
pos = pos + 50
box.style.right = pos + "px";
}
};
#container {
width: 500px;
height: 650px;
background: black;
position: relative;
}
#left {
width: 250px;
height: 650px;
position: relative;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#box1 {
width: 100px;
height: 100px;
right: 200px;
background: red;
position: absolute;
}
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px), repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
height: 100%;
position: absolute;
width: 100%;
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="js/jquery.1.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<div class="grid"></div>
<div id="box1"></div>
<div id="left" onclick="moveLeft()"></div>
<div id="right"></div>
</div>
</body>
</html>
I trying write my first site and I don't know why js file doesn't work.
Maybe you can repair that. I can't write that, because I'm learning to program.
HTML here
<head>
<script type="text/javascript">
</script>
<meta charset="utf-8" />
<title>Makoto Designer</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="javas.js"></script>
</head>
<body>
<header>
<div id="hed">
<img src="/img/logo_okr.png" class="logo">
<div class="biale"></div>
<div class="czarne"></div>
<img src="/img/md.png" class="md">
</div>
</header>
</body>
CSS here
.logo {
display: inline-block;
position: absolute;
width: 155px;
height: 155px;
left: 50px;
top: 50px;
filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.4));
cursor: pointer;
object-fit: cover;
z-index: 3;
}
.md {
display: inline-block;
position: absolute;
width: 532px;
height: 190px;
left: 230px;
top: 18px;
filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.4));
}
.czarne {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #00000099;
z-index: 1;
}
.biale {
position: absolute;
background-color: #FFFFFF;
left: 125px;
top: 55px;
width: 1px;
height: 140px;
z-index: 2;
transition: 2s;
transition-timing-function: ease-out;
}
.biale.on {
position: absolute;
background-color: #FFFFFF;
left: 125px;
top: 50px;
width: 650px;
height: 155px;
z-index: 2;
border-bottom-right-radius: 75px;
border-top-right-radius: 75px;
filter: drop-shadow(0px 7px 10px #00000066);
}
JavaScript here
function handleClicks() {
var logo = $(".logo"),
biale = $(".biale"),
czarne = $(".czarne"),
var menu = {
open: () => {
biale.addCalss("active");
czarne.fadeTo("fast", 1, () => czarne.show());
},
close: () => {
biale.removeClass("active");
czarne.fadeTo("fast", 0, () => czarne.hide());
}
};
logo.click(() => menu.open());
czarne.click(() => {
menu.close();
});
}
addEventListener('DOMContentLoaded', () => {
let biale = $(".biale")[0]
let logo = $(".logo")[0]
let toggle = false
logo.addEventListener('clock', () => {
toggle = !toggle
biale.className = toggle ? 'on' : ""
})
})
I want biale to slide behind the logo and then hide, but wen i click logo nothing happens. Why it not working?
mehh
Put your <script> in the bottom of body tag (not in head) - and also put semiclon after czarne = $(".czarne"); (not comma ,)
In your CSS, change .biale.on to .biale.active
You may want to look at this for help with your HTML file: https://www.w3schools.com/html/html5_intro.asp
Some changes you'll want to do:
Add doctype
Remove that empty js script in head for cleanliness. I'm assuming your JavaScript is going to be in the javas.js file.
Here's what your HTML could look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Makoto Designer</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="javas.js"></script>
</head>
<body>
<header>
<div id="hed">
<!-- Don't forget to close your img tags like this. Do the second one too. -->
<img src="/img/logo_okr.png" class="logo" />
<div class="biale"></div>
<div class="czarne"></div>
<img src="/img/md.png" class="md">
</div>
</header>
</body>
<!-- Also close html at the end -->
</html>
In your javas.js file, try making these changes:
Remove the , comma at the end of the last var declaration. I eliminated the shortcut altogether below.
There was a typo with addClass.
I'm not sure you need the addEventListener. jQuery allows you to use its document ready feature to call your handleClicks function on load in order to set up the fades.
Here's an example:
function handleClicks() {
var logo = $(".logo");
var biale = $(".biale");
var czarne = $(".czarne");
var menu = {
open: () => {
biale.addClass("active");
czarne.fadeTo("fast", 1, () => czarne.show());
},
close: () => {
biale.removeClass("active");
czarne.fadeTo("fast", 0, () => czarne.hide());
}
};
logo.click(() => menu.open());
czarne.click(() => {
menu.close();
});
}
$(document).ready(function(){
handleClicks();
});