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! Screen Recording 2021-03-29 at 22.32.06.mov

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

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?