Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

ZachSaucier last won the day on April 7

ZachSaucier had the most liked content!

ZachSaucier

Administrators
  • Content Count

    2,416
  • Joined

  • Last visited

  • Days Won

    67

ZachSaucier last won the day on April 7

ZachSaucier had the most liked content!

Community Reputation

2,568 Superhero

About ZachSaucier

  • Rank
    Advanced Member

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    USA
  • Interests
    Frontend development, soccer, board games, theology

Recent Profile Visitors

4,233 profile views
  1. Hey duty47. Here are some steps to get you started: Make the cards, lay them out so that they don't wrap. Create an animation that move the cards to the left. Have the cards wrap perhaps using the modifiers plugin like the thread shows: Create a scaling animation for the tweens and pair that with the animation above. When a card is hover, tween the timeScale of your master timeline to 0. Happy tweening!
  2. In case it's not clear from Shrug's answer, in this case you should change the strokeStyle of canvas2Context before the .stroke() command in line 11. You might as well upgrade that script to GSAP 3 while you're working on it, @Lilibouh It has a smaller file size, a sleeker API, and a bunch of new features!
  3. It just depends on the effect that you want. You can subtract a width from them both if you'd like: const finishDistance = startY - innerHeight; gsap.set('.spacer', {height: width});
  4. Similar thread: I figured there was an existing one so I searched and this is the first one that came up.
  5. ZachSaucier

    Circular motion

    How to do this with GSAP 3's MotionPathPlugin: const r = 15; gsap.to('.box', { motionPath: { path: `M 0, 0 m -${r}, 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 -${r * 2},0` }, duration: 10, repeat: -1, ease: "none" });
  6. Hey Vulture. I know I'm a bit late but I figured I might as well post for other people since I just created this effect. You can create a custom scrollbar by just updating a tween's progress when the page is scrolled (and resized if necessary). Here's a minimal example: https://codepen.io/GreenSock/pen/eYpOXYO?editors=0010
  7. Unfortunately it looks like the challenges you're facing are more related to generic logic issues that are unrelated to GSAP. As much as we love helping people around here, we just don't have the resources to provide free consulting services for things that don't directly relate to GSAP. Is there anything GSAP-specific that I can help you with? If so, I'm happy to help. For a simple scrollbar effect see this pen: https://codepen.io/GreenSock/pen/eYpOXYO?editors=0010
  8. Hey @agilepixel and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. We couldn't do what we do without people like you. GreenSock is actually working on our own scroll plugin but it hasn't been released yet. Until we have the scroll plugin, to animate thing on scroll you have to use either the scroll position or the intersection observer API. Here's a basic demo using the scroll position: https://codepen.io/GreenSock/pen/BaNPoEK And here's an article that talks about using the intersection observer API with GSAP: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa
  9. Imgur is a commonly used one.
  10. Sorry, I have no idea what you're trying to say here. Can you try to rephrase? So host that on a website that is accessible via other websites. Then include the URL to that image where you have the URL to the 404 image in your CSS.
  11. Even if I don't resize anything but just scroll up and down fairly quickly the indicator messes up. It seems you have larger logic issues than just resizing. Using a ticker is fine, but your logic inside of it doesn't make much sense to me. I would think that the logic in the ticker would be to detect the scroll position and update the progress based on that. I don't understand why you need a proxy tween.
  12. Are you just asking how to include images in a CodePen pen? So long as the image is allowed cross-origin and the link is correct you should be able to load it. It looks like your URLs go to 404 pages. That seems to be your biggest problem right now
  13. Hey Index Out Of Bound and welcome to the GreenSock forums! Yes, this is a ScrollMagic issue because its current live version is not compatible with GSAP. Given ScrollMagic is the one that uses GSAP, not the other way around, this is not GSAP's fault. In fact, we don't really recommend using ScrollMagic. There are ways to create the same effect without using it. GSAP is in the process of making its own scroll plugin! Unfortunately it's not quite ready yet. In the mean time you can create scroll-based effects by using the scroll position or by using the intersection observer API. Here's a basic demo using the scroll position: https://codepen.io/GreenSock/pen/BaNPoEK And here's an article that talks about using the intersection observer API with GSAP: https://medium.com/elegant-seagulls/parallax-and-scroll-triggered-animations-with-the-intersection-observer-api-and-gsap3-53b58c80b2fa For more about using ScrollMagic, read this thread:
  14. Hey Kevonk and welcome to the GreenSock forums! The Typescript declarations are still a work in progress. I've corrected this error in my local copy but it likely won't be available in the production version until at least the next version release. Ignoring it is a good work around, or changing time: number to time: number | string.
  15. Unfortunately it looks like the challenges you're facing are more related to generic logic issues that are unrelated to GSAP. As much as we love helping people around here, we just don't have the resources to provide free consulting services for things that don't directly relate to GSAP. Is there anything GSAP-specific that I can help you with? If so, I'd be happy to dive in and help.
×