Responsive splitText in NextJS

[Olav]

Hi everyone!

I'm building a NextJS project with some SplitText effects, I'm struggling to make those responsive.

My current effect looks like this:

 

export default function Footer() {
  const el = useRef<HTMLDivElement>(null)

  useIsomorphicLayoutEffect(() => {
    const ctx = gsap.context(() => {
      gsap.set('footer .reveal', { opacity: 1 })
      const targets = gsap.utils.toArray('footer .reveal') as gsap.DOMTarget[]
      targets.forEach((target) => {
        const childSplit = new SplitText(target, {
          type: 'lines',
          linesClass: 'lc',
        })
        const parentSplit = new SplitText(target, {
          type: 'lines',
          linesClass: 'lp',
        })
        gsap.from(childSplit.lines, {
          yPercent: 100,
          stagger: 0.18,
          duration: 0.6,
          ease: 'power3.out',
          scrollTrigger: {
            trigger: target,
            start: 'top 80%',
            toggleActions: 'play none none reverse',
          },
        })
      })
    }, el)
    return () => ctx.revert()
  }, [])
  return (
    <footer> {/* content */} </footer>

I'm following the Creative Coding Club course by @Carl, who has provided the following example:
https://codepen.io/snorkltv/pen/jOBgJbo

Which is exactly what I need, only thing is, how to implement in a React context, instead of 'regular' javascript.

 

I've been searching through the forum but can't seem to find another example like this one. Thanks in advance for your time, any reply's are appreciated!

 

See the Pen jOBgJbo?editors=0010 by snorkltv (@snorkltv) on CodePen

[Rodrigo]

Hi,

 

Is really hard for us to find any issues without a minimal demo.

 

With the code you provided the only thing I can think of is that the order of the SplitText instances are inverted. Maybe give this a try:

useIsomorphicLayoutEffect(() => {
  const ctx = gsap.context(() => {
    gsap.set('footer .reveal', { opacity: 1 })
    const targets = gsap.utils.toArray('footer .reveal') as gsap.DOMTarget[]
    targets.forEach((target) => {
      const parentSplit = new SplitText(target, {
        type: 'lines',
        linesClass: 'lp',
      })
      const childSplit = new SplitText(target, {
        type: 'lines',
        linesClass: 'lc',
      })
      gsap.from(childSplit.lines, {
        yPercent: 100,
        stagger: 0.18,
        duration: 0.6,
        ease: 'power3.out',
        scrollTrigger: {
          trigger: target,
          start: 'top 80%',
          toggleActions: 'play none none reverse',
        },
      })
    })
  }, el)
  return () => ctx.revert()
}, [])

Other than that I can't really tell you without seeing some minimal live editable example.

 

Happy Tweening!