OSUblake

By default, the transform point where scaling and rotation happens is in the center on HTML elements. However, translation (x/y) is always in the top left. So if you want it be in the center, set your elements with an offset like this. gsap.set(".card", { xPercent: -50, yPercent: -50 });

I apparently don't know what I'm doing because I can't get these things lined up. Am I missing something here? And autoRotate looks strange. ?‍♂️ https://codepen.io/osublake/pen/fd7b3512dd17c0e36d99b6e767110805

I think the person that wrote that ended up not using draggable. ?‍♂️ https://codepen.io/ReGGae/pen/EEwrRp

The only thing I would add is to enable overwrite.... gsap.defaults({ overwrite: "auto" }); And modifiers need to return a unit. return (pressedTop ? -skew : skew) + "deg"; But it still a little weird. Probably just need to tweak some stuff.

This should work. MASTER_TIMELINE .add(SPINNER_TIMELINE) .add(HERO_TIMELINE) If those timelines are paused, just add .play() to them. MASTER_TIMELINE .add(SPINNER_TIMELINE.play()) .add(HERO_TIMELINE.play())

Hard to tell from your code what you're trying to accomplish. What is the master timeline doing? And why aren't you just adding those other timelines to it?

Thinking about it, you could probably just use that with a thicker stroke. https://codepen.io/osublake/pen/PdKBXP

Making the wave isn't hard. But putting the points in an array is the busy work admins don't do. That's a hint, hint.

Thanks! That just means terser was being a little too aggressive with renaming stuff.

Yeah, I noticed that. Now just extrapolate all those points into an array, and animate them in a wave similar to my demo above.

Hi @ms1987 I don't see how that could be a gsap issue, but it's hard to tell from the code provided. If you could make a simplified demo on codesandbox, it would be easier to troubleshoot.

They're either animating every single point by hand... https://codepen.io/osublake/pen/7c235b8b3c2d9bb6cecea6acfff7ff37 ...or already have the paths calculated ahead of time, and doing a frame-by-frame animation. Sorry, but there is no easy solution here.

And this doesn't look right at all. MASTER_TIMELINE.add(SPINNER_TIMELINE, { time: SPINNER_TIMELINE.duration(), duration: SPINNER_TIMELINE.duration(), ease: 'power3.inOut', }) .add() is only for adding stuff to a timeline. Looks like you are trying to add and create an animation. https://greensock.com/docs/v3/GSAP/Timeline/add()

Hard to tell, but probably because your original timeline is paused.

trigger is just set as a property on your class. You need to put the creation of it inside one of the lifecycle methods, like ngOnInit. Same with the draggable. <div #container class="container"> <div class="handler" #handler></div> <div class="slider" #slider></div> </div> <div style="height: 2000px"></div> This will get rid of some of your errors. You'll need to fix the rest. maxScroll and barLength are undefined at the start. @Component({ selector: "my-app", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent implements OnInit { @ViewChild("container", { static: true }) container: ElementRef; @ViewChild("handler", { static: true }) handler: ElementRef; @ViewChild("slider", { static: true }) slider: ElementRef; maxScroll: number; barLength: number; draggable: Draggable; trigger; ngOnInit(): void { this.trigger = ScrollTrigger.create({ trigger: this.container.nativeElement, onRefresh: () => this.onResize, onUpdate: () => this.updateHandler }); this.draggable = new Draggable(this.handler.nativeElement, { type: "x", bounds: this.container.nativeElement, onDrag: () => { this.trigger.scroll( (this.draggable.x / this.barLength) * this.maxScroll ); // when dragging, scroll the page to the corresponding ratio } }); } updateHandler() { // move the handler to the corresponding ratio according to the page's scroll position. gsap.set(this.handler.nativeElement, { x: (this.barLength * this.trigger.scroll()) / this.maxScroll }); } onResize() { if (this.trigger) { this.maxScroll = ScrollTrigger.maxScroll(window as any); // record the maximum scroll value for the page this.barLength = this.slider.nativeElement.offsetWidth - this.handler.nativeElement.offsetWidth; this.updateHandler(); } } }

gsap doesn't know what's in your css. It has to use the computed style to determine the start values, which returns a matrix. If you have x/y components in your css transform: translate3d(0px, 100px, 0px); That's going to return a 2D matrix, so gsap will do the switch. If you have a z component transform: translate3d(0px, 100px, 1px); That's going to return a 3D matrix, so it's going to keep it 3d. But like I said earlier, if you want it to always be 3d, just set force3D to true. gsap.to(foo, { x: 100, force3D: true // always uses 3d });

Yeah, I'm guessing it's because Chrome can detect when a CSS animation is happening, so it can optimize for that. When setting the style inline, it doesn't know anything about what's going to happen next, so it's going to optimize for text legibility, resulting in the pixel snapping. But that's just a guess. ?‍♂️

I've had thousands of timelines running at the same time without issue (with WebGL). As @Cassie said, it's more about what you having the timeline do. If you're animating font sizes, width, and height is probably going to have a greater impact on performance than animating transforms and opacity.

Sometimes adding a slight rotation can help with the pixel snapping... and of course adding will-change. gsap.set(".gsap", { rotation: 0.01 })

That's by design. translate3d usually performs better, but uses more memory as it has to store a rasterized version of the graphic, kind of like CSS's will-change, so there is no point in keeping the rasterized graphic around in memory at the end of an animation. gsap.to(foo, { x: 100, force3D: "auto" // default }); gsap.to(foo, { x: 100, force3D: true // always uses 3d }); gsap.to(foo, { x: 100, force3D: false // never uses 3d }); I don't think there's much use in messing with the default unless you can quantify that it works better with a different setting. There are use cases where changing it works better, but they are rare.

There's no difference, except using gsap/all imports everything during dev, so your compile times might be a little slower as it's more code to process. FYI, you don't don't need to register any gsap eases.gsap.registerEase() is used to register a custom easing function.

Forgot you can also do everything as a string. gsap.set('.box', { backgroundColor: "random(['#efecca', '#a9cbb7', '#f7ff58', '#ff934f', '#5e565a'])", })

You just need it to return a function so it gets called for every element. Notice the true at the end. gsap.set('.box', { backgroundColor: gsap.utils.random(['#efecca', '#a9cbb7', '#f7ff58', '#ff934f', '#5e565a'], true), })

Looks like you have some bad scoping going on here. You're using a regular function, so it's scoped to the draggable instance. That means you can't access stuff on the component, like trigger, barLength, maxScroll, etc. I would probably do it like this. This assumes there is only 1 element with the .handler class in your entire document at a given time. I would highly suggest using the element reference instead. Same goes for .container. draggable = new Draggable(".handler", { type: "x", bounds: ".container", onDrag: () => { this.trigger.scroll((this.draggable.x / this.barLength) * this.maxScroll); // when dragging, scroll the page to the corresponding ratio } });

Doh, I didn't read down far enough.