ZachSaucier

Hey Stepheno and welcome to the GreenSock forums. The exact transition from up above isn't the most trivial with the Flip plugin because 3D transforms aren't directly supported by the Flip plugin (as stated in the docs for it). With that being said, Flip can handle the sizing and positioning changes for you and you could hook into the onStart callback to fire off a rotation animation as well.

Someone else may be able to better explain why setting the duration of the timeline doesn't work well, but usually for things like this I add a dummy tween: https://codesandbox.io/s/gsap-scrolll-forked-37lbi?file=/src/App.js Side note: you don't needs quotes around the scale value.

@PointC I completely forgot about the CSS wrapper, haha.

@Cassie has started a how NOT to use GSAP "competition". We'd love to see more participants! Here's mine:

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!

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?

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.

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):

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

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.

Hey kryptonite and welcome to the GreenSock forums. GreenSock tweeted about how to make this sort of thing and some similar ideas:

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.

@anush That request is a bit broad. I think you'd probably find what you need in the ScrollTrigger demos section though.

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.

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.

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.

I added that after this post was made

Hey Kaleb. You should be able to use gsap.killTweensOf(functionReference).

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

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?

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.

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 )

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 reproduce inside of a shader. But if you're not already comfortable using WebGL it might be a big jump.

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?

For more info about staggers, see the staggers documentation.