Jump to content
Search Community

JustHugo

Members

  • Posts

    7

  • Joined

  • Last visited

 Content Type 

Posts posted by JustHugo

    Pinned element, fixed position issue

    in GSAP

    Posted

    Oh thanks didn't know that could exist.

    So using "pinType:"transform"" make the deal.
    The only issue i have is that it's not smooth.
    i have to find how to make it smoother


    And btw how the my fixed position issue be relative to parent transform property while the parent is generated by gsap ( the div with .pin-spacer class)

    Pinned element, fixed position issue

    in GSAP

    Posted



    Hi @Cassie, thank you for your answer, 
    your code didn't change anything unfortunately.
    have you see my website to understand where and what is my problem ?

    my codepen is only here to show that i tried on it and everything works as i want.
    But i don't understand why on my wordpress website, fixed position don't works and is not relative to viewport.

    Horizontal scroll parallax images

    in GSAP

    Posted

    Hi, i'm trying to replicate this animation , but i don't really understand what's wrong with the animation.

    See the Pen ExKWVdq by pixit_design (@pixit_design) on CodePen

     -> found on another topic.

    My structure is different.
    When i don't set horizontal: true, the image property change, but when i want to do it with horizontal trigger, the property doesn't change anymore.

    I'm sorry if this question has already been asked.
    i hope you will be able to help me

    See the Pen NWOxVyg by Hugo-R (@Hugo-R) on CodePen

    ScrollTrigger for horizontal scroll and locomotiveScroll

    in GSAP

    Posted

    Hi, i'm trying to create an horizontal scroll on my gallery section.
    So i followed lot of tutorials, and compared my code to lot of codepen to understand why, my horizontal scroll doesn't works.
    Sometimes it works, but the section is not pinned,
    Sometimes the section is pinned but scroll doesn't works.

    What did i do wrong.

    Also i'm using tailwindCss.



    Here is my useLocoScroll Hook: 

    import {gsap} from "gsap"
import { ScrollTrigger } from "gsap/dist/ScrollTrigger"
import LocomotiveScroll from "locomotive-scroll"
import "locomotive-scroll/src/locomotive-scroll.scss"
import { useEffect } from "react"

gsap.registerPlugin(ScrollTrigger)

const useLocoScroll = () => {
    useEffect(()=>{
        const scrollEl = document.querySelector('#page-wrapper');

        let locoScroll = new LocomotiveScroll({
            el: scrollEl,
            smooth:true,
            multiplier:1,
            class: 'is-reveal',
            markers:true
        })
        
        locoScroll.on('scroll', () => ScrollTrigger.update)
        
        ScrollTrigger.scrollerProxy(scrollEl, {
            scrollTop(value) {
              if (locoScroll) {
                return arguments.length
                  ? locoScroll.scrollTo(value, 0, 0)
                  : locoScroll.scroll.instance.scroll.y;
              }
              return null;
            },
            getBoundingClientRect() {
                return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
            },
            pinType: scrollEl.style.transform ? "transform" : "fixed"
          });
          
        const lsUpdate = () => {
            if (locoScroll) {
                locoScroll.update();
            }
        };

        ScrollTrigger.addEventListener("refresh", lsUpdate);
        ScrollTrigger.refresh();

        return () => {
            if (locoScroll) {
              ScrollTrigger.removeEventListener("refresh", lsUpdate);
              locoScroll.destroy();
              locoScroll = null;
            }
        };
    })
}

export default useLocoScroll

    And here my gallery component. 

    import gsap from "gsap";
import { useEffect, useRef } from "react";

const Gallery = ({ data }) => {
    const ref = useRef(null);
    const projects = data.projects.data

    useEffect(() => {
        // This does not seem to work without a settimeout
        setTimeout(() => {
            let sections = gsap.utils.toArray(".gallery-item-wrapper");
            const sectionWidth= ref.current.offsetWidth
            const scrollWidth = sectionWidth - window.innerWidth
            console.log(sections);
            console.log(ref.current.offsetWidth - window.innerWidth);

          gsap.to(sections, {
            scrollTrigger: {
                scroller: "#page-wrapper",
                scrub: true,
                trigger: ".sectionHorizontalScroll",
                pin: true,
                snap: 1 / (sections.length - 1),
                start: "top top",
                end: ()=> `+=${sectionWidth}`,
                markers: {startColor: "green", endColor: "red", fontSize: "12px"}
            },
            x: -100 * (sections.length - 1),
            ease: "none",
          });
        });
      }, []);

    return(
        <section id="" className="h-screen w-max py-32 sectionHorizontalScroll" data-scroll-section >
            <div className="pinSectionHorizontalScroll">
                <div className="flex flex-nowrap w-max" ref={ref} >
                        {
                            projects.map((project, index) => {
                                return <GalleryItem 
                                    mignature={project.attributes.mignature}
                                    title={project.attributes.title}
                                    key={project.attributes.title + "-" + index}
                                />
                            })
                        }
                    </div>
            </div>
        </section>
    )
}

const GalleryItem = ({mignature, title}) => {
    return (
        <div className="w-[50vh] gallery-item-wrapper" data-scroll>
            <h3 className="text-3xl font-bold text-grayPrimary">{title}</h3>
        </div>
    )
}

export default Gallery


    At last, i added my locoScroll to my Layout like that:
      

    import ImageWebP from '../../components/ImageWebP'
import Birds from './Canvas/Birds'
import { Outlet } from "react-router-dom";
import Header from './Header';
import { useState } from 'react';
import CursorProvider from './CustomCursor';
import useLocoScroll from '../../services/useLocoScroll';

export default function Layout() {

    useLocoScroll();
    const [isMenuOpen, toggleMenuOpen] = useState(false)
    return(
        <>
            <CursorProvider>
                <Header toggleMenu={toggleMenuOpen} isMenu={isMenuOpen}/>
                <section id='page' 
                    className={
                        'h-full w-full relative  transition-all' +
                        (isMenuOpen ? " ml-96" : " ml-0")
                    }>
                    <section className='fixed left-0 top-0 w-screen h-screen -z-10'>
                        <ImageWebP
                        src={window.location.origin + "/assets/imgs/backrounds/background1.webp"}
                        fallback={window.location.origin + "/assets/imgs/backrounds/background1.jpg"}
                        classnames=" h-screen w-screen object-screen block "
                        alt="A photo showing the expiration date on a box of Lucky Charms" 
                        className="object-cover h-full w-full"
                        />
                    </section>
                    <Birds />
                    <div id='page-wrapper' className=" w-full h-full min-h-screen z-30" data-scroll-container>
                        <Outlet />
                    </div>
                </section>
            </CursorProvider>
        </>
    )
}


    Thank you if you take times to help me.


    There is the demo here:  https://justhugo.fr
     

     

    See the Pen by (@) on CodePen

×
×
  • Create New...