javascript – Why my scrollMagic is not working properly?

So basically I have a 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="https://stackoverflow.com/questions/72237192/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>

Leave a Comment