Olav

April 8

Hi,

Thanks for the example, seems to be exactly what I need!

April 6

Hi all,

I'm trying out some pinning effects and I can't seem to find a solution for one I have in mind. I've taken a good look at all the layered pinning examples but I think this requires something else.

What I'd like to achieve is that the red element scrubs through an animation. When that animation is finished, it should remain pinned but let the pink element with opacity 0.5 scroll over the red section. What I had in mind was that the pin should remain in place, but when the animation is finished, pinSpacing should be disabled? In any way, can't get it to work properly, does anyone have a suggestion?

Thanks in advance!

See the Pen poBaBZZ by olavgit (@olavgit) on CodePen

October 26, 2023

I couldn't help but try to figure out another way to make this work, and I'm nearly there. I just can't get my hands on the positioning of an svg clipPath, which isn't gsap related, but maybe someone here has the missing answer to my problem. I have created this very very minimal demo:

See the Pen jOdbaZP by olavgit (@olavgit) on CodePen

All I want is for my custom clipPath to be centered on the element it is clipping, just like the behaviour of the red circle. Is this possible?

October 21, 2023

Thanks for the lead @Cassie, I ended up with this:

See the Pen oNmNjRg by olavgit (@olavgit) on CodePen

Achieves the same effect, but in a slightly hacky way I guess. Do you think this could be optimised?

October 21, 2023

Hi @Rodrigo,

Thanks for your examples! I can see this working with 'simple' shapes, but what if I need to use a logo or another svg which would be to complex to recreate in the css clip path property. Can we also handle this using the actual svg clipPath? And do you maybe have an example for that?

October 20, 2023

Hi all,

I'm trying to implement the following effect:

https://imgur.com/26yCYUZ

I've found it on a few website's such as:

https://martingarrix.com

https://tilt.digital

https://lanouvelle.agency

Included is a minimal demo on how the html/css/scrolltrigger should behave, although I have no idea on how to actually implement the svg / clip path effect. Does anyone have an idea in the right direction, or another codepen using the same concept? Thanks in advance!

See the Pen jOdNeQM by olavgit (@olavgit) on CodePen

May 26, 2023

Perfect solution, many thanks @mvaneijgen!

May 26, 2023

Thanks for you reply! It seems like you are totally right, I edited my codepen a bit:

As you can see, making both values use 6 points, the animation plays. Not with the calc function though, if you uncomment those you can see the animation doesn't play. I'd like for my corners to be straight, and not use percentage based values. Any ideas on how I could get this working? In some other clipPath related posts I saw @Cassie mention the use of css variables, will that influence things?

May 26, 2023

Hi all,

I've included a codepen where I'm trying to animate a complex clipPath which I can't seem to get working. For now, it is supposed to animate from the complex css clip-path, to the simple gsap clipPath. Would this be possible, and if so, would it also to animate from a complex clip-path to a complex clipPath? Read complex as a clip-path that uses the css calc() function.

Thanks for reading!

See the Pen PoyLgGb by olavgit (@olavgit) on CodePen

May 19, 2023

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

May 18, 2023

@EfrainBergin I've got something working but I'd be more than glad to hear your solution aswell!

May 17, 2023

Although it works perfectly in javascript, I'm getting some errors in my typescript project. I won't bother to fix the ones that won't be necessary after version 3.11.5, since I can throw those out anyway, after the update.

        existingTriggers.forEach((t) => t.revert(true, true)); // revert existing ScrollTriggers

On this line, I'm getting a TS2339: Property 'revert' does not exist on type 'ScrollTrigger'. I'm not a typescript hero at all, but this is a line that I'm supposed to keep. How would I fix that?

Also for my useRef's I've been using a type of <any>, what would the correct types for these be?

const smoother = useRef<any>(null);
const ctx = useRef<any>(null);

May 17, 2023

@GreenSock thank you so much for actually taking the time to figure this one out! You are a hero. I've implemented your solution and works like a charm, haven't found any hiccups yet.

May 15, 2023

@GreenSock any chance you've taken a look at my minimal demo, did it demonstrate my issues properly? I'm really hoping to find a solution since my project heavily relies on these animations. I've been experimenting all week but can't seem to get improvement.

May 9, 2023

2 hours ago, GreenSock said:

Hm, do you have a minimal demo that clearly illustrates the issue? That'd be super helpful.

I've spent some time creating a demo which shows my problems perfectly, I hope it'll be useful in finding a solution.

See it here: https://stackblitz.com/edit/nextjs-jbcb2g?file=app/layout.js

I've recreated the original reason for creating this post, I have some effects which should reveal text from below (box-c and box-d in the demo), but the animation doesn't fire properly. Instead of playing the animation, the elements jump into place once you hit the scrolltrigger. If you scroll fast enough, you can still catch part of the animation playing, so I guess the animation is playing directly on load, not waiting for the scroll trigger.

The second effect is place in the <Footer /> component, which is loaded in the layout.js file. The animation also uses a scroll trigger. For starters, it doesn't set the .from position properly, since you can still see the path's jump into place when scrolling down the page. Once they are in the correct position, the animation seems to work fine, until you navigate to another page. Try going the 'ipsum' page in the menu, the footer animation freezes and also the scroll trigger markers disappear.

I've also implemented your posted solution in the layout file @GreenSock, but it doesn't seem to work right now. Other than that this is the starter file made by greensocklearning, so no other configuration done by me.

May 9, 2023

@GreenSock, thanks! I had the context solution working, but this seems to work aswell. Only thing is, my animations are in a footer component (applied in the standard layout), when I go to another page, the exact same thing happens again, where the animations don't fire properly and just appear without animating.

May 3, 2023

Hi @Rodrigo,

Thanks for your reply, I'd be happy to implement this into my project. Do you maybe have an example on how to implement the context in the layout page, and how to make scroll triggers in other components wait for that context? I'll be implementing this effect in a lot of other components aswell. I've had a look at the docs and understand what's supposed to be happening, but have no clue on how to implement it correctly. I'm really looking forward to your reply!

May 2, 2023

Another update, the second problem;

On 5/1/2023 at 6:54 PM, Olav said:

For the second issue, the logo at the bottom of the page is still in 'native' position when you first scroll down. Then while scrolling down, you can see the individual paths jump to their animated, 'correct' position. I've already had a look at the FOUC article you shared

Is now fixed, I added a gsap.set for yPercent: 100, and changed the from tween to a to tween. Now there is no more FOUC.

Yet I'm still really stuck on my first problem, also visible in the minimal demo I provided. Also, when I enable scrub, everything seems to work fine, but when I just want the animation to play when it hits the scroll trigger, it doesn't work as expected. I'm comparing to example's online and am probably really close to the answer, if anyone can see what's going wrong, it's really appreciated

May 2, 2023

18 hours ago, Olav said:

For the first issue, the orange and light blue boxes 'c' and 'd' don't animate properly, they just jump into place when they hit the scroll trigger. Without a scroll trigger, the animations work fine. What am I doing wrong?

I've done some further testing and fount out that this first part has got to do with the ScrollSmoother I'm using. I disabled scroll smoothing on touch devices, because a pinned scroll trigger was laggy. Since I disabled the scroll smoother on touch devices, the animations fire up perfectly fine (only on the touch devices tho). And idea's for the desktop version, with scrollsmoother enabled? And for the second part, the FOUC, I've also done more experimenting but can't come up with anything that works.

May 1, 2023

Hi @Rodrigo

I've made a demo in Stackblitz according to your instructions, which show both of my problems.

Check it out here: https://stackblitz.com/edit/nextjs-wuuj6h?file=app/page.js

For the first issue, the orange and light blue boxes 'c' and 'd' don't animate properly, they just jump into place when they hit the scroll trigger. Without a scroll trigger, the animations work fine. What am I doing wrong?

For the second issue, the logo at the bottom of the page is still in 'native' position when you first scroll down. Then while scrolling down, you can see the individual paths jump to their animated, 'correct' position. I've already had a look at the FOUC article you shared, I'm also following the CreativeCodingClub course by @Carl to learn all about it, but can't seem to get it to work properly.

Also, next to my 2 problems, am I not making any other mistake's for react/nextjs in my gsap code. I'm trying to learn the syntax and hooks and all, this works, but don't know if its how its supposed to be.

I hope this demo is enough to look at my problems, I really appreciate your time in advance,

Kind regards.

May 1, 2023

I've managed to resolve the original error of this post, yet I am still wondering if my code is "correct" for react/nextjs.

My tsx code now looks like this, which doesn't error, but also doesn't play properly.

export default function Footer({ smoother }: { smoother: any }) {
  const showScrollMd = useRef<HTMLButtonElement>({} as HTMLButtonElement)
  const handleClick = () => {
    smoother.current.scrollTo(0, true)
  }

  useEffect(() => {
    if (!showScrollMd.current) return
    showScrollMd.current.classList.add('xl:flex')
  }, [])

  const el = useRef<HTMLDivElement | null>(null)

  useIsomorphicLayoutEffect(() => {
    const ctx = gsap.context(() => {
      gsap.from('#crftd path', {
        yPercent: 100,
        stagger: 0.06,
        scrollTrigger: {
          trigger: el.current,
          start: 'top bottom',
          end: 'top 30%',
          scrub: true,
        },
      })

      const targets = gsap.utils.toArray('.reveal')
      targets.forEach((target: Element) => {
        const childSplit = new SplitText(target, {
          type: 'lines',
          linesClass: 'lineChild',
        })
        const parentSplit = new SplitText(target, {
          type: 'lines',
          linesClass: 'lineParent',
        })
        gsap.from(childSplit.lines, {
          yPercent: 100,
          stagger: 0.18,
          duration: 1,
          ease: 'power4.out',
          scrollTrigger: {
            trigger: target,
            markers: true,
            start: 'top 75%',
            end: 'bottom center',
          },
        })
      })
    }, el)
    return () => ctx.revert()
  }, [])
  return (
   <footer
      id="crftd-footer"
      ref={el}
      className="bg-crftd-black pb-6 pt-16 text-crftd-white md:pb-12 md:pt-24 xl:pt-36"
    >
        // a lot of html, you can see it here: https://github.com/olavgit/crftd/blob/main/components/footer/footer.tsx
        </footer>

I've recreated the SplitText/ScrollTrigger effect in a

See the Pen ExdwPeb by olavgit (@olavgit) on CodePen

, where it works flawlessly. I've included a very low quality screen recording of how it acts in my localhost, it is also visible on the live site. Can anyone explain to me why the text reveal animation isn't playing properly, the text just appears out of nowhere? And also, the logo.svg has a staggered effect which works fine, but has some sort of flash of unstyled content which I can't seem to get rid off. When you scroll down the first time, the letters suddenly jump to their animated positions. Thanks in advance for your time reading!

April 30, 2023

Hi everyone,

I'm working on a project in NextJS using a few different gsap plugins. The main thing I'm not getting to work in this component is the SplitText animation (which I based on this codepen). My code looks like this. As you can see, I've commented out the part that makes the split text animation fire. When I try to run with the code enabled, I'm getting the following error. Can anyone explain to me what is going wrong? I'm really trying to understand and learn gsap in combination with nextjs, so if you see any other improvements I can make to the component they will be gladly appreciated. Also, I was wondering how I could do something such as:

new SplitText( el.current "p", { ...

When I only want to select the <p> tag's within my component. I really appreciate your time reading and maybe answering in advance, have been hitting my head and googling all evening but can't get it too work properly.

Kind regards,

Olav

See the Pen pxBMvy by PointC (@PointC) on CodePen

April 26, 2023

Hi Rodrigo,

Thanks! This worked for the build process. Why does it work in the start example but not in my project though?

And also, do you maybe have an idea on the types thing mentioned in my initial post?

April 25, 2023

Hi!

I'm trying to add the ScrollSmoother plugin to my project, and have literally copied the example provided by greenbacks learning.

My export for the root layout looks like this:

'use client'

import './globals.css'
import Navbar from '../components/navbar'
import Footer from '../components/footer'
import localFont from 'next/font/local'
import useIsomorphicLayoutEffect from '../helpers/isomorphicEffect'

import { useRef } from 'react'
import { usePathname } from 'next/navigation'
import { gsap } from 'gsap/dist/gsap'
import { ScrollSmoother } from 'gsap/ScrollSmoother'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger, ScrollSmoother)

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const smoother = useRef()
  const ctx = useRef()
  const pathname = usePathname()

  useIsomorphicLayoutEffect(() => {
    ctx.current = gsap.context(() => {
      smoother.current = ScrollSmoother.create({
        smooth: 1,
        effects: true,
      })
    })

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

Which works fine in my localhost area, but on build I get the following error. Where does this go wrong? What can I change?

Also, in my IDE it looks like this.

Another thing that I don't understand, my code won't run unless my ../types/gsap.d.ts looks like this:

declare module 'gsap/dist/gsap'
declare module 'gsap/ScrollSmoother'
declare module 'gsap/ScrollTrigger'

Which shouldn't be necessary if I'm following the docs correctly, anyone have an idea why this is necessary?

Any help will be highly appreciated, looking forward to your reply,

Olav

April 25, 2023

I changed my code to the following:

useIsomorphicLayoutEffect(() => {
    const ctx = gsap.context(() => {
      tl.current = gsap
        .timeline({
          onStart: () => {
            document.body.style.overflow = 'hidden'
            document.body.style.cursor = 'wait'
          },
        })
        .to(
          '#preloader-logo',
          { yPercent: 160, duration: 1, ease: 'power2.inOut' },
          1,
        )
        .to(
          '#preloader-bg',
          {
            yPercent: -100,
            duration: 0.25,
            ease: 'power2.inOut',
            onStart: () => {
              document.body.style.overflow = 'auto'
              document.body.style.cursor = 'auto'
            },
          },
          '<+=.5',
        )
    }, el)
    return () => ctx.revert()
  }, [])

Which seems to work perfectly fine! Thanks for your suggestion @Rodrigo

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Olav