[GSAP x NextJS x Locomotive Scroll]

Hi @Cassie thank you very much for your advices. i do have svgs taking like... the entire page and apply blur and blend effects on them. It does seem like exporting the already blured svg could save some resources, maybe even not using it as an svg but a plain webp image maybe ?

However, I did try to do the entire animation without anything on my page other than the div with the clip-path animation and it was still laggy (which I'm sure has nothing to do with GSAP because it worked well in other projects and I see some examples where it works fine).

https://memoire-vive.vercel.app/gsap-playground/clip-path

You can find a simple clip path here (the page with huge lags but completely understandable after your feedback is the website index)

Thank you very much for your help, I truly appreciate it

[GSAP x NextJS x Locomotive Scroll]

EDIT : the code sandbox now shows a version without locomotive scroll, the problem I'm now facing is extreme lag that I don't understand, and setting will-change properties breaks both scrub and pin on my elements

[GSAP x NextJS x Locomotive Scroll]

Do you think I could use the bonus plugin for smooth scrolling in my school project ? It will be deployed on Vercel, not sure if I'm allowed to do that, but it's just a final exam showcase, not a real public website. @Rodrigo

[GSAP x NextJS x Locomotive Scroll]

Hello @Rodrigo thank you for the posts you shared. Saddly, either I couldn't make it work in my project or the solution is somewhat else. I created a sandbox to help anyone see the code as it is : https://codesandbox.io/p/github/ntndlcrt/memoire-vive/

Not quite sure why locoscroll doesn't work well though, I think I will redo the project later with more time given.

I do appreciate your help however and hope I'll find a way to make it work.

[GSAP x NextJS x Locomotive Scroll]

I'm trying to create a simple effect in Nextjs 13 but can't find a way to make nextjs, locoscroll and gsap work together.

Here's the wrapper in which all of my pages will be rendered :

 

'use client'

import { useEffect } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

export default function LocomotiveScrollProvider({ children }) {
    useEffect(() => {
        let locoScroll

        import('locomotive-scroll').then((locomotiveModule) => {
            gsap.registerPlugin(ScrollTrigger)

            locoScroll = new locomotiveModule.default({
                el: document.querySelector('[data-scroll-container]'),
                smooth: true,
                smoothMobile: false,
                resetNativeScroll: true,
                getDirection: true,
            })

            locoScroll.on('scroll', () => {
                ScrollTrigger.update()
            })

            ScrollTrigger.scrollerProxy('.smooth-scroll-gsap', {
                scrollTop(value) {
                    return arguments.length
                        ? locoScroll.scrollTo(value, 0, 0)
                        : locoScroll.scroll.instance.scroll.y
                },
                getBoundingClientRect() {
                    return {
                        top: 0,
                        left: 0,
                        width: window.innerWidth,
                        height: window.innerHeight,
                    }
                },

                pinType: document.querySelector('.smooth-scroll-gsap').style
                    .transform
                    ? 'transform'
                    : 'fixed',
            })

            ScrollTrigger.addEventListener('refresh', () => locoScroll.update())

            ScrollTrigger.refresh()
        })

        window.addEventListener('DOMContentLoaded', () => {
            locoScroll.update()
        })

        window.addEventListener('resize', () => {
            locoScroll.update()
        })
    }, [])

    return (
        <div data-scroll-container>
            <div className="smooth-scroll-gsap">{children}</div>
        </div>
    )
}

 

And here's my component code :

 

'use client'

import { useEffect, useRef } from 'react'
import { gsap } from 'gsap'

export default function Remember() {
    const containerRef = useRef(null)
    const cardRef = useRef(null)

    useEffect(() => {
        let ctx = gsap.context(() => {
            const tl = gsap.timeline({
                scrollTrigger: {
                    trigger: containerRef.current,
                    start: 'center center',
                    end: '+=100%',
                    scrub: true,
                    pin: true,
                    markers: true,
                    scroller: '.smooth-scroll-gsap',
                },
            })

            tl.from(cardRef.current, {
                yPercent: 100,
                top: '100%',
            }).to(cardRef.current, {
                yPercent: -50,
                top: '50%',
            })
        }, containerRef.current)

        return () => ctx.revert()
    }, [])

    return (
        <section
            data-scroll-section
            ref={containerRef}
            className="relative min-h-screen flex items-center justify-center"
        >
            <div className="row flex justify-center">
                <h2 className="text-[10vw] text-center w-2/3 leading-[0.8] font-bit">
                    REMEMBER YOUR WILDEST MEMORIES
                </h2>
            </div>
            <div
                ref={cardRef}
                className="w-[300px] h-[600px] bg-red-500 absolute left-1/2 -translate-x-1/2"
            ></div>
        </section>
    )
}

 

Basically I would like to have an effect like this :
 

• There's a div with a text in the middle and a hidden card in absolute position
• When the div reaches the middle of the viewport, scrolling stops and the card starts changing its top % value to overlay the text in the middle
• Once done, the scroll starts again

 

But I can't find a way to make it work. Would anyone know about this type of effects ?

[Zoom-in in divs with infinite smooth scroll]

Hi, for a school project I would like to recreate the effect as seen on this website :
https://2018.craftedbygc.com/#enter

The most important part is the fact to zoom in divs and go from one div to another in a smooth way, scrolling endlessly until the end, and have the animation evolve with scrolling, not just fire at a certain position. How can I achieve that ?

I'm very new to gsap so I lack experience to determine the best approach.