OSUblake

What do you mean "standalone"? You can either use ScrollTrigger's .matchMedia() or write your own media queries.

I would say that you should always use refs instead of selector strings, otherwise you'll quickly run into conflicts with other components that have same ids/class names. Which ones? You might be surprised how much gsap can do. https://greensock.com/docs/v3/GSAP/UtilityMethods const posX = d3.scaleLinear() .domain([0, 100]) .range([0, this.viewport.clientWidth]); // same as this const posX = gsap.utils.mapRange(0, 100, 0, this.viewport.clientWidth); Or just using the plain DOM/SVG APIs. d3.select(chart).attr( "viewBox", `0 0 ${chart.clientWidth} ${chart.clientHeight}` ); // same as this... chart.setAttribute(`0 0 ${chart.clientWidth} ${chart.clientHeight}`);

That's pretty new. I've known about it, but I don't think I've ever used it.... transform-box: fill-box; Back in the day you had to put in the x and y coordinates for the origin to rotate around. <rect x="145" y="100" width="30" height="30" transform="rotate(45 145 100)" />

You're server just seems really really slow. The canplaythrough event is just an estimate of it can play all the way through. You might have to fetch the video, kind of like someone did in this demo. That's where I stole that video clip from. https://codepen.io/shshaw/pen/9e810322d70c306de2d18237d0cb2d78

@GreenSock would have to answer why GSAP defaults to the top-left of the element instead of the center, but I'm guessing it's because the smooth origin feature came later. If you've worked with complicated transforms before, like with canvas, you will know that changing the transform origin can cause the element position to change.

It's always been like that for SVG elements. Why? Because GSAP is forward thinking ? And this... transform origin was inconsistent. https://css-tricks.com/svg-animation-on-css-transforms/ If you want it to be the center of the element... gsap.set("rect", { transformOrigin: "50% 50%" }); If you want it to use the SVG origin... gsap.set("rect", { svgOrigin: "100 75" });

GSAP will still use rAF, but the smoothness is ultimately going to be determined by how many frames there are. The same goes for canvas. The more images you include, the smoother it might be. Just a simple demo using video. https://codepen.io/osublake/pen/c1416a0b271d6a7d5efa8a2c0d97e839

Well, the only way to make it download faster is to have a faster internet connection. The best thing to do is to make sure your server is allowing those images to be cached so the user doesn't have redownload them again on subsequent page visits. Another option would be to use video instead of images. You should be able to set the playhead of the video using ScrollTrigger.

Is there a problem on mobile? That tool is just an emulator and shouldn't be used for actual testing.

It's best to move it from a container. https://codepen.io/osublake/pen/cf9ef27c7ed8866b42d9bc967f86f132

That's what we're here for ?

The calculations will be wrong with relative. The modifiers wraps based on the translated X position, but with relative, you would also have to take into account how far left the item is initially positioned. BTW... this thread has a helper function that may be of use.

If it works, it's correct. ? But it seems like a good approach to me.

Don't use images. Put everything into a single SVG. SVG is markup, just like HTML. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg

Just post the url.

For one, you're using relative values like "-=200" and "+=200". That's just going to add/subtract to whatever the x value is at that moment in time. For example, if x is 135 when you click prev, then it's going to animate x to 335, and not 400 like you're expecting. Another thing is that this calculation doesn't work like you might expect when x is negative. parseFloat(x) % containerWidth https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder Or you can use the wrap util. https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

Here's an pen using an older version of gsap, but the logic is still relevant. https://codepen.io/osublake/pen/rZOGZy

How far did you get? That's a super complicated animation, and needs to be broken down into pieces. That's why I would recommend starting with the FLIP part.

Oh, I just did a quick estimate to get it working... and I probably used "vh" by accident. Either way, using vh/vw units probably isn't ideal because the gap between the slides looks like a px value. You would probably have to calculate the amount on every resize. Assuming your component is the entire width of the screen, you could get the bounding rect of the last slide and subtract the screen width from it to get how far the slides need to animate. const { left, width } = lastSlide.getBoundingClientRect(); const totalWidth = (left + width); const screenWidth = window.innerWidth; this.galleryAnim.progress(0); // create new animation this.galleryAnim = gsap.to(...)

The FlipPlugin might be a good place to start with moving elements. https://greensock.com/docs/v3/Plugins/Flip

Here's a start. Needs a little bit of fine tuning. It gets a little jittery with small changes. https://codepen.io/osublake/pen/f8af01af2eae2cb07bf3b65d3c6a6cb9

Hey, sorry about that. Had some other stuff come up that I needed to finish first, but I'm working on this right now.

Loading one image should be faster than loading 100 images, but we're in an http2 world, so the difference is negligible. This is my performance tip.... get your animation working first. If you notice a performance problem, I will personally help you fix it.

Cool! I'll update your pen in a few. While you're waiting, here is the strategy I use for stuff like that. I use a "hidden" proxy element for the draggable, then apply the changes from that proxy element to something else, like a WebGL animation. Just an example. Uses are very old version of Angular. https://codepen.io/osublake/pen/5f0a77404087e565567cfb3870f0c2b6

Hey @Shaban Iddrisu™ Love seeing shaders!!! Are you planning on replacing the horizontal scroll with draggable? I ask this because not everyone can scroll horizontally, i.e. people who use a mouse. Technically you can scroll horizontally by holding the shift button while scrolling with the mouse wheel, but most people don't know that.