-
Posts
7 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Posts posted by AlexN
-
-
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?
Need help with loader animation...
in GSAP
Posted
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...