Jump to content
Search Community

Alaa Alshofi

Members

  • Posts

    5

  • Joined

  • Last visited

 Content Type 

Posts posted by Alaa Alshofi

    Next JS - Scrolltrigger with snap and pin section causing issue on mobile, it is jumping forth and back before snapping to the next/previous slide.

    in GSAP

    Posted

    let panels: HTMLDivElement[] = gsap.utils.toArray('.mobile-section')
     
    if (panels && panels.length > 0) {
    masterTimeLine.current = gsap.timeline({
    scrollTrigger: {
    trigger: sectionRef,
    pin: true,
    scrub: 1,
    snap: 1 / (panels.length - 1),
    invalidateOnRefresh: true,
    pinSpacing: false,
    immediateRender: false,
    preventOverlaps: true,
    pinType: 'fixed',
    anticipatePin: 0,
    start: 'top top',
    end: () => '+=' + sectionRef.clientWidth,
    onEnter: ({end}) => {
    setScrollTweenEnd(end)
    },
    },
    })
     
    masterTimeLine.current.to(panels, {
    x: '-200vw',
    ease: 'none',
    })
     
    ScrollTrigger.create({
    trigger: '#experience',
    containerAnimation: masterTimeLine.current,
    start: 'top center',
    end: 'center top',
    id: '1',
    onEnter: () => {
    setCurrentSlider(1)
    // gsap.to('#experience', {opacity: 1, duration: 0.2})
    },
    onLeave: () => {
    // gsap.to('#experience', {opacity: 0.3, duration: 0.2})
    setCurrentSlider(2)
    },
    onEnterBack: () => {
    setCurrentSlider(1)
    // gsap.to('#experience', {opacity: 1, duration: 0.2})
    },
    })
     
    ScrollTrigger.create({
    trigger: '#ai-powered',
    containerAnimation: masterTimeLine.current,
    start: 'top center',
    end: 'center top',
    id: '2',
     
    onEnter: () => {
    setCurrentSlider(2)
     
     
    },
    onLeave: () => {
     
    setCurrentSlider(3)
     
    },
    onEnterBack: () => {
     
    setCurrentSlider(2)
     
    },
    onLeaveBack: () => {
     
    setCurrentSlider(1)
     
    },
    })
×
×
  • Create New...