Jump to content

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

ZachSaucier last won the day on February 23

ZachSaucier had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


ZachSaucier last won the day on February 23

ZachSaucier had the most liked content!

Community Reputation

6,526 Superhero

About ZachSaucier

  • Rank
    Advanced Member

Profile Information

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

Recent Profile Visitors

8,339 profile views
  1. Yep! Small notes: You can just use the x property instead of translateX if you want. Instead of gsap.utils.toArray(document.getElementsByClassName('image')); you can just do gsap.utils.toArray('.image');
  2. It does, but you're creating a new animation each time... So the progress of the new animation is being set each time. See the issue? If you include the timeline and tween creation in a useEffect with [] as the second parameter it works as I think you're wanting it to work: https://codepen.io/GreenSock/pen/jOVxqVV?editors=0010
  3. I think you've overcomplicating the creation of the timeline a bit. I'd do something like this (thrown together): https://codepen.io/GreenSock/pen/OJbZMeK?editors=0010 Or you could edit the demo that Shrug pointed out above.
  4. That's a React question and I don't know the answer to it. The goal is to have ScrollTrigger refresh once all of your components have mounted. Maybe @Rodrigo has some time to provide some insight at some point.
  5. Currently you're not using the scroller property of ScrollTrigger that makes the ScrollTrigger use the scroller specified. So your scrollerProxy is not doing anything helpful. Either use the scroller property to specify the scroller and remove the ScrollTrigger.update() call from the smooth scroller callback (like this) or remove the .scrollerProxy() completely. The in-between that you have makes no sense. As for the pinning question ultimately the responsibility is on you to get it working. We don't promise to support every single third party library. My guess is that you will nee
  6. By this I mean the following: If the mouse y is -100px from the center of the target and the mouse x is 50px from the center of the target, then the distance from the mouse position to the center of the target is sqrt(x^2 + y^2) - the hypotenuse of the triangle formed by the two offsets. If that distance is less than some maximum that you set, then you animate it.
  7. Sorry for the delayed response - the weekend This mis-position is due to the components in the AnimationScrollBlock not being loaded before the ScrollTriggers are set up. It's one of the most common ScrollTrigger mistakes that I linked to. You can see that this is the issue by resizing the window after the page has loaded incorrectly - that forces ScrollTrigger to refresh and the position is corrected. So if you call ScrollTrigger.refresh() after the components have been switched out after the page change the issue will go away. Side notes: toggleActions don't
  8. I would use a vastly different approach: instead of using hit detection, trying to judge the direction, and so forth, I would calculate the distance in the x and y directions from the dragged object to the center of each item. If the diagonal distance to the center is within a certain maximum, you animate the item away in the opposite direction, optionally in proportion to the distance. That way you don't have have a bunch of different cases, it all just reacts based on the same singular condition.
  9. Hey Lovestoned. This is really just a CSS question. I highly recommend that you spend some time learning the basics of how to position things with CSS in different ways. A few notes: It almost never makes sense to absolutely position the body element. Not setting all of the transforms of elements that you're animating with GSAP is one of the most common GSAP mistakes. You're using some of the old syntax in that you're including the duration in the second parameter. We recommend including it in the vars instead so that you can make use of GSAP's defau
  10. Hey Shaman. I think it'd help if you focused on describing your end goal more clearly instead of focusing on the question that you have right now. What's the end effect that you want to create?
  11. Hey Shikha. Several big issues here. You posted a thread with all of the content in the title. Please do not do that. Use the body of the forum post for the content and only use the title for a title. You attached a ZIP file with premium Club GreenSock files (Inertia Plugin and SplitText) in it. How do you have access to those files? You're not a Club GreenSock member on this account. Also please DO NOT post Club GreenSock files for free for anyone to download like that. Not on here, on GitHub, or anything like that. That is against our licensing. In the future, inst
  12. Hey fupuchu and welcome to the GreenSock forums. A few notes: Avoid animating non-performant properties like bottom. Instead stick to performant properties like GSAP's y property which uses transforms Since your two tweens are affecting the same targets with the same duration and ease at the same time it probably makes sense to use a single tween for them both. You might learn a lot from my article about animating efficiently. As for your question, there's not magic unit that fixes it on all screen sizes for all effects. A lot of the difficulty about web
  13. This is because you're using anonymous functions. You have to use a named function if you want to kill it later (or else it will try to kill a function that it just created). So it should be something like: gsap.ticker.add(this.playTicker); gsap.ticker.remove(this.playTicker); But then you need to fix the this scope problem inside of playTicker. One way to do that would be to bind a function with the correct scope to the class: https://codepen.io/GreenSock/pen/mdOxNYo?editors=0010 Another option is to not use classes.
  14. This is common to do, especially when rendering things to Canvas/WebGL. But it can also be used for CSS background images.
  15. Are you saying you want it to be covered by the new section? There are demos in the ScrollTrigger demos section that show how to do that sort of thing.