I have a problem in reactjs wherein My setPin don't work properly in reactjs but in normal html it works properly... Basically the code was something like this in normal html
Javascript
const controller = new ScrollMagic.Controller()
const tl = new TimelineMax()
const boxes = document.querySelectorAll('.box-screener')
const slides = document.querySelectorAll('.landslide')
new ScrollMagic.Scene({
triggerElement:".falling-categories-absolute",
triggerHook:0,
duration:"100%"
})
.setPin('.falling-categories-absolute')
.addTo(controller)
boxes.forEach((elem,i) => {
tl.fromTo(elem,0.5,{opacity:0,x:'30%'},{opacity:1,x:"60%"})
const scene1 = new ScrollMagic.Scene({
triggerElement:".falling-categories-absolute",
triggerHook:"onLeave",
duration:"100%",
})
.setTween(tl)
.addTo(controller)
})
const tl3 = new TimelineMax()
tl3.fromTo('.products-title h2',
1,
{
width:'0px'
},
{
width:'300px'
})
const scene3 = new ScrollMagic.Scene({
triggerElement:".falling-categories-absolute",
triggerHook:"onLeave",
duration:'100%'
})
.setTween(tl3)
.addTo(controller)
const tl2 = new TimelineMax()
tl2.fromTo(slides,1,
{width:'0%'},
{width:"5.1%",
stagger:{
each:0.05,
from:"left"
}
}
)
const scene2 = new ScrollMagic.Scene({
triggerElement:".falling-categories-absolute",
triggerHook:"onLeave",
duration:"100%",
})
// .setPin('.falling-categories-absolute')
.setTween(tl2)
.addTo(controller)
CSS
*,
*::before,
*::after {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
}
section {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: baseline;
}
.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 {
display: block;
width: 100%;
height: 100%;
}
.falling-categories-absolute {
/* width: 100%; */
z-index: 1;
background: black !important;
height: 100vh;
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.products-title {
position: absolute;
top: 30%;
left: 20%;
color:white;
z-index: 1000;
font-size: 45px;
font-style: italic;
/* background: saddlebrown; */
}
.products-title h2 {
/* width: 300px; */
position: relative;
}
.products-title h2::after {
content: '';
position: absolute;
width: 100%;
height: 3px;
background: white;
bottom: 0;
left: 0;
}
.landslide {
position: absolute;
top: 0;
left: 0;
z-index: -1;
height: 100%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(2) {
left: 5%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(3) {
left: 10%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(4) {
left: 15%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(5) {
left: 20%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(6) {
left: 25%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(7) {
left: 30%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(8) {
left: 35%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(9) {
left: 40%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(10) {
left: 45%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(11) {
left: 50%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(12) {
left: 55%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(13) {
left: 60%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(14) {
left: 65%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(15) {
left: 70%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(16) {
left: 75%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(17) {
left: 80%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(18) {
left: 85%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(19) {
left: 90%;
background: rgb(141, 141, 141);
}
.landslide:nth-child(20) {
left: 95%;
background: rgb(141, 141, 141);
}
.whole-box {
width: 100%;
height: 100%;
/* background: yellow; */
}
.box-screener {
position: absolute;
width:400px;
height:300px;
top: 25%;
left: 25%;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.box-screener:nth-child(2) {
width: 400px;
left: 55%;
}
.box-screener:nth-child(3) {
top: 55%;
left: 30%;
}
.box-screener:nth-child(4) {
left: 60%;
top: 55%;
}
.box-screener img {
width: 100%;
height: 100%;
}
<!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>
Scroll Down
</section>
<div class='home'>
<div class="falling-categories">
<div class="falling-categories-absolute">
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="landslide"></div>
<div class="products-title">
<h2> Products </h2>
</div>
<div class="whole-box">
<div class="box-screener">
<img src="../Introduction/img/1.jpg" alt="" />
</div>
<div class="box-screener">
<img src="../Introduction/img/1.jpg" alt="" />
</div>
<div class="box-screener">
<img src="../Introduction/img/1.jpg" alt="" />
</div>
<div class="box-screener">
<img src="../Introduction/img/1.jpg" alt="" />
</div>
</div>
</div>
</div>
<div class="LowerBound">
</div>
</div>
<script src="./index.js"></script>
</body>
Yes this is working but in my reactJS the setPin() is giving a bug wherein It doesn't pin the parentDiv or parentElement `.falling-categories-absolute ` And I don't understand why... Here is the reactJS 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.png'
import a2 from './images/a2.png'
import a3 from './images/a3.png'
import a4 from './images/a4.png'
function Home() {
useEffect(() => {
ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax)
const controller = new ScrollMagic.Controller()
const tl = new TimelineMax()
const boxes = document.querySelectorAll('.box-screener')
const slides = document.querySelectorAll('.landslide')
new ScrollMagic.Scene({
triggerElement:".falling-categories-absolute",
triggerHook:0,
duration:"100%"
})
.setPin('.falling-categories-absolute')
.addTo(controller)
boxes.forEach((elem,i) => {
tl.fromTo(elem,0.5,{opacity:0,x:'30%'},{opacity:1,x:"60%"})
const scene1 = new ScrollMagic.Scene({
triggerElement:".falling-categories-absolute",
triggerHook:"onLeave",
duration:"30px",
})
.setTween(tl)
.addTo(controller)
})
const tl3 = new TimelineMax()
tl3.fromTo('.products-title h2',
1,
{
width:'0px'
},
{
width:'300px'
})
const scene3 = new ScrollMagic.Scene({
triggerElement:".falling-categories-absolute",
triggerHook:"onLeave",
duration:'30px'
})
.setTween(tl3)
.addTo(controller)
const tl2 = new TimelineMax()
tl2.fromTo(slides,1,
{width:'0%'},
{width:"5.1%",
stagger:{
each:0.05,
from:"left"
}
}
)
const scene2 = new ScrollMagic.Scene({
triggerElement:".falling-categories-absolute",
triggerHook:"onLeave",
duration:"50px",
})
// .setPin('.falling-categories-absolute')
.setTween(tl2)
.addTo(controller)
},[])
return (
<div className='home'>
<div className="falling-categories">
<div className="falling-categories-absolute">
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="landslide"></div>
<div className="products-title">
<h2> Products </h2>
</div>
<div className="whole-box">
<div className="box-screener">
<img src={a1} alt="" />
</div>
<div className="box-screener">
<img src={a2} alt="" />
</div>
<div className="box-screener">
<img src={a3} alt="" />
</div>
<div className="box-screener">
<img src={a4} alt="" />
</div>
</div>
</div>
</div>
<div className="LowerBound">
</div>
</div>
)
}
export default Home
Can anyone tell me why it doesnt setPin please? I badly hate this I keep repeating and search for the problems but nothings happening.
HERE IS MY UPDATED POST.
I'll show all my codes since it is not really a privacy.
I don't understand what kind of bug is this anyone help me?
https://codesandbox.io/s/adoring-satoshi-72i76d?file=/src/Apple/Home.jsx
