AlexN

It's Amazing, Shaun! 

I knew it could be done somehow! But my knowledge didn't left me a chance. Thank you so much!

I hope in near future I will help other developers with their questions... 

Playing around with gsap to get more experience with it. And stuck on the first simple animation, or not...

I'm trying to make same as on attached video. But no luck. I know we need to use stagger here.  But how to 

use it together with fromTo, or timeline for this specific case, I don't know. We need to change opacity to 1,

back to 0 and only after stagger it.

Thank you!

See the Pen MWJjmYg by royalhunt (@royalhunt) on CodePen

Wow! Did know we can do like this! Thank you! 

10 hours ago, GreenSock said:

Paging @Rodrigo (our resident React expert)

 

I don't see any ScrollTrigger code, though, except that .refresh() call. I'm curious why you're doing that. It's always best if you provide a minimal demo (maybe a codesandbox?) because it's tough to troubleshoot based purely on a small blurb of JS. 

Best support ever! Thank you for quick response!

Link to sandbox with the problem: https://codesandbox.io/s/goofy-johnson-r7cgc

The solution could be wait until useCollapse animation will finish using delaydCall and then refresh scrollTrigger. But it feels as a hack...

Hello Superheroes,

I need your help with my problem. I have next React hook, which kinda work as expected.

But I feel it could be optimized. And I have a problem to update ScrollTrigger  in another component after 

layout change. Could you give me an idea what could be wrong here... Thank you

const useCollapsible = ({ isCollapsed, duration = 0.5, delay = 0 }: Props) => {
  const ref = React.useRef(null);

  const openState = {
    height: 'auto',
    duration,
  };

  const closedState = {
    duration,
    delay,
    height: 0,
    overflow: 'hidden',
  };

  React.useEffect(() => {
    if (isCollapsed) {
      gsap.to(ref.current, closedState);
    } else {
      gsap.to(ref.current, openState);
    }
    ScrollTrigger.refresh(true);
  }, [isCollapsed]);

  return ref;
};

Thank you for the answers ! Should I close, or delete a topic somehow?

Hi All!
First of all I want to say Thanks for the magnificent product for animation. It saves so much time which we can spend on family :)

I will be appropriate for your help in beautifying my code, if it is possible.

I'm just start using GSAP and don't know if my code is optimized and pretty enough. But it works!

const tl = gsap.timeline({ repeat: -1, repeatDelay: 2 });

    gsap.to(".path", 50, {
      strokeDashoffset: -1000,
      ease: 'none',
      repeat: -1,
    });

    gsap.set(".plane", {
      xPercent: -50,
      yPercent: -50,
      transformOrigin: '50% 50%',
      scale: 0.7,
      autoAlpha: 0,
    });

    tl.to(".plane", {
      duration: 1,
      autoAlpha: 1,
    })
      .to(".plane",
        {
          duration: 7,
          ease: 'none',
          motionPath: {
            align: ".path",
            path: ".path",
            autoRotate: true,
            curviness: 0.5,
          },
        },
        '-=1'
      )
      .to(".plane", { duration: 3, scale: 0 }, '-=2')
      .to(".pin",
        {
          duration: 1,
          scale: 1.1,
          skewX: -10,
          rotate: 20,
          transformOrigin: '50% 100%',
        },
        '-=2'
      )
      .to(".pin",
        {
          duration: 1.5,
          scale: 1,
          skewX: 0,
          rotate: 0,
          transformOrigin: '50% 100%',
          ease: 'elastic.out(1.5, 0.2)',
        },
        '-=1'
      );

How it looks?