We Keep Coding

Why my scrollMagic is not working properly?

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

Overlapping img using jQuery

I'm trying to implement an effect on overlapping images so when I click and drag a bar the other image underneath should reveal modifying the width. My code works, but it's kind of buggy. When I click on the bar I have to then release it to make it work, so it's not really a drag, and it supposed to stop moving when I release the click.
And second, the bar goes right even outside my container. How could I fix my code?
var up = $("#up");
var bar = $("#bar");
var container = $("#container");
bar.on("mousedown", function () {
container.on("mousemove", function (e) {
bar.css("left", e.clientX);
up.width(e.clientX);
});
});
$("body").on("mouseup", function () {
container.off("mousemove");
});
container.on("mouseleave", function () {
container.off("mousemove");
});
* {
margin: 0;
box-sizing: border-box;
}
img {
height: 400px;
width: 600px;
object-fit: cover;
}
#up {
width: 50%;
}
#bottom,
#up {
position: absolute;
overflow: hidden;
}
#container {
position: relative;
border: 5px solid cornflowerblue;
height: 410px;
width: 610px;
}
#bar {
position: absolute;
height: 400px;
width: 10px;
background-color: hotpink;
left: 300px;
cursor: e-resize;
}
<!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" />
<title>Document</title>
</head>
<body>
<div id="container">
<div id="bottom">
<img src="https://via.placeholder.com/600x400?text=Image1" alt="image" />
</div>
<div id="up">
<img src="https://via.placeholder.com/600x400?text=Image2" alt="image" />
</div>
<div id="bar"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Explanation : When the bar was being slid, the images were acting as draggable elements. To stop that, I set draggable attribute to false in both image elements. Besides that, the blue color appearing was highlight because of selection of element. To prevent that, I set CSS property user-select to none for the container divs of images.
For browser compatibility, use different versions for user-select.
var up = $("#up");
var bar = $("#bar");
var container = $("#container");
bar.on("mousedown", function() {
container.on("mousemove", function(e) {
let left = e.clientX;
let containerWidth = container.width();
let barWidth = bar.width();
if((left + barWidth) > containerWidth)
left = containerWidth - barWidth;
bar.css("left", left);
up.width(left);
});
});
$("body").on("mouseup", function() {
container.off("mousemove");
});
container.on("mouseleave", function() {
container.off("mousemove");
});
* {
margin: 0;
box-sizing: border-box;
}
img {
height: 400px;
width: 600px;
object-fit: cover;
}
#up {
width: 50%;
}
#bottom, #up {
position: absolute;
overflow: hidden;
user-select: none;
}
#container {
position: relative;
border: 5px solid cornflowerblue;
height: 410px;
width: 610px;
}
#bar {
position: absolute;
height: 400px;
width: 10px;
background-color: hotpink;
left: 300px;
cursor: e-resize;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="container">
<div id="bottom">
<img src="https://via.placeholder.com/600x400?text=Image1" alt="image" draggable="false"/>
</div>
<div id="up">
<img src="https://via.placeholder.com/600x400?text=Image2" alt="image" draggable="false"/>
</div>
<div id="bar"></div>
</div>

My advise is to NOT unregister (remove) the mousemove event listener.
Below, I used a barActive as a "flag" to know if the mouse button is down. The flag is resetted on mouseup and mouseleave of the container.
The mousemove event is a machinegun... But is still not fast enough to "really" follow the mouse. So if a user moves the bar fast, the cursor often is off the bar (I'm sure you noticed it). So a mouseup has good chances to not fire if the mouseup event listener is on the bar. So the event listener has to be on the container.
Now... While mousemove is not fast enought to follow the mouse perfectly... It often is too fast and may interfeer with the actions you wish to do with the other events, like mousedown were you set the "flag". At the same millisecond, you can have the mousedown event and multiple mousemove events. So to "isolate" it form the mousemove events, I used a real tiny setTimeout. That is giving enought time for the flag to be set bafore any next mousemove to enact.
About making sure the bar does not go outside the container, I used a condition on e.clientX.
I also took the container's padding in account.
console.clear();
var up = $("#up");
var bar = $("#bar");
var container = $("#container");
var barActive = false;
bar.on("mousedown", function (e) {
barActive = true;
});
container.on("mousemove mouseup mouseleave", function (e) {
if (barActive && e.type === "mousemove") {
setTimeout(function () {
if (e.clientX < container.width() && e.clientX>5) {
bar.css("left", e.clientX - 8);
up.width(e.clientX - 8);
}
}, 1);
return;
}
barActive = false; // Applies only for mouseup and mouseleave
});
* {
margin: 0;
box-sizing: border-box;
}
img {
height: 400px;
width: 600px;
object-fit: cover;
user-select: none; /* Prevents the image itself to be selected */
}
#up {
width: 50%;
}
#bottom,
#up {
position: absolute;
overflow: hidden;
}
#container {
position: relative;
border: 5px solid cornflowerblue;
height: 410px;
width: 610px;
overflow: hidden; /* Will make sure the bar does not go over the border */
}
#bar {
position: absolute;
height: 400px;
width: 10px;
background-color: hotpink;
left: 300px;
cursor: e-resize;
}
<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" />
<title>Document</title>
</head>
<body>
<div id="container">
<div id="bottom">
<img src="https://via.placeholder.com/600x400?text=Image1" alt="image" />
</div>
<div id="up">
<img src="https://via.placeholder.com/600x400?text=Image2" alt="image" />
</div>
<div id="bar"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CodePen

Why doesn't my browser make a difference between classes and ids in my thread?

Well this is a kind of a hard question to ask, but i guess you will see why:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="jquery.min.js"></script>
<link href="jquery-ui/jquery-ui.css" rel="stylesheet">
<script src="jquery-ui/external/jquery/jquery.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<style type="text/css">
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
}
.obstacle {
border-radius: 1em;
background-color: #663300;
width: 100px;
height: 75px;
margin-left: 30px;
margin-top: 200px;
}
</style>
</head>
<body>
<div id="player"></div>
<div class="obstacle"></div>
<script>
$('body').css('cursor', 'none');
/*$("#player").click(function() {
var position = $("#circle").offset();
alert(position);
});
$("#player").draggable(); */
$(document).mousemove(function(event){
var X = event.pageX;
var Y = event.pageY;
$("#player").css('margin-top', Y-75);
$("#player").css('margin-left', X-75);
//alert(X+" "+Y);
});
</script>
</body>
</html>
This code should create a div with an id of "player", then place it wherever your cursor currently is. (that works just fine) But then there is the "obstacle" which for some reason moves along with the player, although it shouldn't.
Why is this happenning? Could someone explain it to me?
A picture:

https://jsfiddle.net/fq4y4r41/
$('body').css('cursor', 'none');
/*$("#player").click(function() {
var position = $("#circle").offset();
alert(position);
});
$("#player").draggable(); */
$(document).mousemove(function(event){
var X = event.pageX;
var Y = event.pageY;
$("#player").css('top', Y-75);
$("#player").css('left', X-75);
//alert(X+" "+Y);
});
and css
#player {
position: absolute;
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
}
you changing margins which affects that block size, so bottom blocks moving too. try to change top and left instead and set it's position to absolute
that way you move that element away from flow - https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Since you want to move a block based on mouse movement, I think you might have to use a different position value, like absolute
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
$('body').css('cursor', 'none');
/*$("#player").click(function() {
var position = $("#circle").offset();
alert(position);
});
$("#player").draggable(); */
$(document).mousemove(function(event) {
var X = event.pageX;
var Y = event.pageY;
$("#player").css('margin-top', Y - 75);
$("#player").css('margin-left', X - 75);
//alert(X+" "+Y);
});
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
.obstacle {
border-radius: 1em;
background-color: #663300;
width: 100px;
height: 75px;
margin-left: 30px;
margin-top: 200px;
}
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="player"></div>
<div class="obstacle"></div>
Demo: Fiddle

You only need to change the css
#player {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: green;
margin-left: 10px;
margin-top: 100px;
position: absolute;
}
here is the jsFiddle. Checkit out :)

Trying to get Mobile Menu Shelf to work

I'm trying to get a simple mobile navigation to work, but nothing happens when I click the trigger button. Any help would be much appreciated! My first steps in JS, so I apologise if I made a really stupid mistake...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Mobile Menu</title>
<script>
// When trigger is clicked, check if menu is currently hidden or shown
// Choose what action to perform
$('#trigger').click( function() {
if ($('#menu').hasClass('menu-hide')) {
showMenu();
}
else {
hideMenu();
}
});
function showMenu() {
$('#menu').removeClass('menu-hide').addClass('menu-show');
}
function hideMenu() {
$('#menu').removeClass('menu-show').addClass('menu-hide');
}
</script>
<style>
#menu {
position: fixed;
top: 0px;
left: -200px;
width: 200px;
height: 100vh;
transition: left 0.2s ease-in-out;
background-color: #484848;
}
.menu-show {
left: 0px;
}
#trigger {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="trigger"></div>
<div id="menu" class="menu-hide"></div>
</body>
Thanks
Andreas

First, the main code had to be inside ready function in order to trigger:
"$(document).ready(function(){}"
And secondly for the CSS to work you have to move the left style to menu-hide
Working example:
$(document).ready(function() {
$('#trigger').click(function() {
if ($('#menu').hasClass('menu-hide')) {
showMenu();
} else {
hideMenu();
}
});
});
function showMenu() {
$('#menu').removeClass('menu-hide').addClass('menu-show');
}
function hideMenu() {
$('#menu').removeClass('menu-show').addClass('menu-hide');
}
#menu {
position: fixed;
top: 0px;
width: 200px;
height: 100vh;
transition: left 0.2s ease-in-out;
background-color: #484848;
}
.menu-show {
left: 0px;
}
.menu-hide {
left: -200px;
}
#trigger {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 50px;
height: 50px;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title>Mobile Menu</title>
</head>
<body>
<div id="trigger"></div>
<div id="menu" class="menu-hide"></div>
</body>
</html>

Form doesn't move up on submit

I'm trying to move the form up a few pixels and this doesn't work. I don't know why.
The function is being called when I submit (I have tested it with an alert()), but the css part doesn't work.
This is the code:
<!DOCTYPE>
<html>
<head>
<title> Pagina de Luis </title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Londrina+Solid' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
top: -50 px;
});
});
});
</script>
<style type="text/css">
body,
p {
font-family: 'Source Sans Pro';
font-size: 30px;
line-height: 15px;
letter-spacing: 0px;
font-weight: bold;
}
#container {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#contenido {
width: 50%;
min-width: 300px;
margin-left: 60px;
letter-spacing: -1px;
padding: 20px 0 0px 0;
}
#texto {
padding: 20px;
margin-top: 30px;
}
#texto p {
margin: 0px;
padding-bottom: 20px;
}
#nombre {
font-family: 'Special Elite';
font-size: 30px;
padding-top: 15px;
border: 0px;
}
#imagen {
vertical-align: text-top;
width: 50%;
float: right;
}
input:focus {
outline: 0 !important;
}
</style>
</head>
<body>
<div id="container">
<div id="contenido">
<form method="POST" id="formulario">
<div id="texto">
<p>Hola, soy Luis.</p>
<p>Bienvenido a mi web personal.</p>
<p>Antes de nada,</p>
<p>¿podrías indicarme tu nombre?</p>
<input type="text" id="nombre" autofocus autocomplete="off" />
</div>
</form>
</div>
</div>
</body>
A live version of the code:
http://www.luisalmerich.com/

You are using css top without any position properties. Try using position absolute or relative
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
top: '-50px',
position: 'relative'
});
});
});
If you do not wish to change the position property, you can modify the margin-top property like
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
marginTop: '-50px'
});
});
});
Finally, note that when a form submits, the page reloads so you will most likely only see this change temporarily. If you return false, the page will not reload(although this may not be what you want)
$(document).ready(function () {
$("#formulario").submit(function (event) {
$(this).css({
marginTop: '-50px'
});
return false;
});
});

Can you try adding position: relative; also
$("#formulario").submit(function (event) {
$(this).css({
position: "relative",
top: "-50px"
});
});

If you want it to work with .animate() try this:
$(document).ready(function () {
$("#formulario").submit(function (event) {
event.preventDefault();
$(this).css('position', 'relative')
.animate({top: '-50px'}, 5000, function () {
// Animation complete.
})
});
});