James23

Hey GSAP helper !!! thanks for the help okay let me try to restruck this to suite React and I will get back to you if I have any issues from there. cheers

I have issues with my code as the footprints will appear if I change some of my code .... but as soon as I refresh the page it disappears and no longer comes back. If anyone could help would be much appreciated and if you need more code from me let me know <div className="a footprint"></div> <div className="b footprint"></div> <div className="c footprint"></div> <div className="d footprint"></div> <div className="e footprint"></div> <div className="f footprint"></div> <div className="g footprint"></div> <div className="h footprint"></div> <div className="i footprint"></div> <div className="j footprint"></div> <div className="k footprint"></div> <div className="l footprint"></div> <div className="m footprint"></div> <div className="n footprint"></div> <div className="o footprint"></div> <div className="p footprint"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script> .footprint{ background-image:url("https://www.pcsoleil.fr/footprint.svg"); width:50px; height:50px; background-size: contain; background-repeat: no-repeat; transform: rotate(390deg); position: absolute; left: 600px; opacity: 0; } .a{top:310px;} .b{top:200px;left: 700px;transform: rotate(430deg);} .c{top:150px;left: 850px;transform: rotate(430deg);} .d{top:200px;left: 1000px;transform: rotate(141deg);} .e{top:350px;left: 1100px;transform: rotate(135deg);} .f{top:550px;left: 1300px;transform: rotate(150deg);} .g{top:750px;left: 1350px;transform: rotate(190deg);} .h{top:900px;left: 1300px;transform: rotate(176deg);} .i{top:1100px;left: 1220px;transform: rotate(190deg);} .j{top:1600px;left: 1100px;transform: rotate(200deg);} .k{top:1740px;left: 1070px;transform: rotate(209deg);} .l{top:1980px;left: 900px;transform: rotate(205deg);} .m{top:2070px;left: 800px;transform: rotate(205deg);} .n{top:1870px;left: 1000px;transform: rotate(203deg);} .o{top:2150px;left: 690px;transform: rotate(206deg);} .p{ top:2700px; left:320px; transform: rotate(180deg);} import React from 'react'; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import "./Gallery.css"; import Gallery1 from "./Gallery1.png"; import Golfo from "./Golfo.png"; import School from "./School.mp4"; import Gambarie from "./Gambarie.png"; import { ImageViewer } from "react-image-viewer-dv"; gsap.registerPlugin(ScrollTrigger); const Gallery = () => { ScrollTrigger.batch(".footprint", { start: "top 20%", end: "bottom bottom", onEnter: elements => gsap.to(elements, {opacity: 1, stagger: 0.1}), onLeaveBack: elements => gsap.set(elements, {opacity: 0}), scrub: true, invalidateOnRefresh: false, }); ScrollTrigger.refresh();