Jump to content

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

ZachSaucier last won the day on March 16

ZachSaucier had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by ZachSaucier

  1. @PointC I completely forgot about the CSS wrapper, haha.
  2. @Cassie has started a how NOT to use GSAP "competition". We'd love to see more participants! Here's mine:
  3. Yes, makes sense. I was going to do it that way if there were not something secret already built in that supports this Thanks for the info!
  4. Hey friends, With an object based stagger, you can do an onStart like so: stagger: { each: 1, onStart: myFunc } However if you use the distributeByPosition stagger helper function (like this demo) it doesn't work that way. Any ideas how to get a stagger onStart to work with a setup like the linked demo?
  5. ZachSaucier

    Text rotator

    You could change the duration of the tween inside of the loop. Or use .timeScale() on the timeline. Also I noticed you used the old formatting for duration of the tween that you added. We recommend including the duration inside of the vars parameter so that you can make use of GSAP's defaults functionality.
  6. I made something sort of similar that I linked to in this post that may be of some use (though it's definitely not production-ready):
  7. You've got 120 lines of HTML, 310 lines of CSS, and 201 lines of JS. That's really as minimal as you can get? I bet you could strip out 500+ lines of code and still get the same core logical issue that you're having. Perhaps it's best to recreate the issue from the ground up. You're much more likely to get a speedy and helpful reply if you make a bare-bones demo
  8. Sorry, what do you mean by this? I haven't looked closely, but I'm guessing this is a z-index/layering issue. Side note: you should probably create your function(s) outside of the matchMedia listener so they don't get recreated multiple times. You can call it inside the matchMedia as needed.
  9. Hey kryptonite and welcome to the GreenSock forums. GreenSock tweeted about how to make this sort of thing and some similar ideas:
  10. Hey J4N1P and welcome to the GreenSock forums. Sure, you just need to make the image sequencing a part of a greater timeline and attach a ScrollTrigger to that timeline.
  11. @anush That request is a bit broad. I think you'd probably find what you need in the ScrollTrigger demos section though.
  12. First off, when posting a demo to these forums please use the "fork" button so that the old version is retained. That way context is not lost for other readers As for the fading, I'd likely create a timeline with whatever animations that you need and attach the ScrollTrigger to the timeline instead.
  13. Hey neworigin and welcome to the GreenSock forums. You're making one of the most common ScrollTrigger mistakes: using general selectors when you should use scoped ones. The article goes into more details about how to fix it.
  14. Hey Jloafs and welcome to the GreenSock forums. Any of the demos that you've found using the inertia plugin will work without the inertia plugin. You just won't be able to have the inertia part of it applied.
  15. Hey Kaleb. You should be able to use gsap.killTweensOf(functionReference).
  16. But you'll notice if you use movemove to move it and drag it "breaks". That's one reason why I asked the questions that I did
  17. Hey waimalao and welcome to the GreenSock forums. Two questions: Have you considered using pointer events instead? They work with both mouse and touch... How are you picturing the mousemove working alongside the Draggable?
  18. In my opinion, just start making stuff with HTML, CSS, and JS If you want to mix in learning about SVG, Canvas, and WebGL (probably through a library like Three.js) go for it. You definitely don't have to be proficient in anything to start working with GSAP. Though obviously the more JS knowledge you have the better. @Carl has an intro video course that's good if you're into that sort of thing. There's also the Getting Started article, learning section, and docs to help get you started.
  19. Hey arthurdelaforet and welcome to the GreenSock forums. Here's a thread that talks about how to do this sort of thing (make sure to upgrade it to GSAP 3 if you're going to use it )
  20. Hey Trapti. First off, you're using an old version of GSAP and the plugins there. We highly recommend using GSAP 3. Here's a version that uses GSAP 3. As for how to make it more flag like, you just need to change the parameters to get it looking the way that you want it to. I suppose it would be helpful if there was a better explanation of what each parameter does... @GreenSock maybe you could add that to the demo that I linked above? There are of course other ways to achieve this sort of thing. WebGL is a fairly good way as flag movement is pretty easy to
  21. I'd bet there's a misconfiguration of the authentication token then. What's your server environment like? Are you using something like Netlify or Vercel?
  22. For more info about staggers, see the staggers documentation.
  23. For reference this was asked about (and hints given) in the GSAP forum:
  24. Hey Unbekannter and welcome to the GreenSock forums. First off, you're making one of the most common GSAP mistakes and one of the most common ScrollTrigger mistakes: using the old GSAP syntax and including ScrollTriggers in tweens within timelines. I recommend upgrading to the GSAP 3 syntax. I also recommend creating a timeline that does everything that you need and then attaching one ScrollTrigger to that timeline. That should make achieving your goal pretty straightforward.