Jump to content
GreenSock

AlexN

Members
  • Posts

    7
  • Joined

  • Last visited

Posts posted by AlexN

  1. 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

  2. 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...

  3. 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;
    };

     

  4. 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?

×