Why my setPin in scrollMagic don't pin in react but in normal html it works properly?

[Xenex122]

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

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[GSAP Helper]

Also, please keep in mind that ScrollMagic is not a GreenSock product, so we cannot offer support for that here. ScrollTrigger does everything ScrollMagic can do plus much more - I see you're using that too but there's no reason to use both. I'd strongly suggest just using ScrollTrigger and the modern syntax of GSAP 3. 

[Xenex122]

so that means it have a setPin wherein it doesn't move until the animation scroll is done? Because when I search that in scrollTrigger there is no documentation for that thing that is same as scrollMagic isn't it? Anyway I will show it in codeSandBox

[Xenex122]

And if possible can you  make an example like the same of it? in gsap ScrollTrigger. just basic basic example.

[Xenex122]

PLEASE I BADLY NEED HELP ANYONE I"m SO STUCK WITH THIS FOR LIKE 2 DAYS and Can't even figure out what the troubleshoot is giving me here...

[PointC]

As mentioned above, ScrollMagic is not a GreenSock product so we can't offer any support for it. You can use ScrollTrigger which has a whole section on pinning.

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

There are also several demos to show how to pin:

https://greensock.com/st-demos/

 

You will need to post a minimal demo and ask a specific GSAP related question in order to receive the best answers.

 

Keep in mind that this is the weekend so the forum may not be as active. Continually posting isn't going to help.

 

Once we see your minimal demo and know your specific problem, we can guide you to a solution.

 

Thanks. 

[Cassie]

Hey, I've taken a look at your demo - you're using deprecated syntax. TweenMax and TweenLite are very old versions of GSAP - Check out the migration guide.

 

This guide may also help with React.

 

 

Here's a demo of pinning using updated GSAP syntax, react and ScrollTrigger.