Love GSAP 3 and how much code that I am saving!!!

[UbiAssassin]

Hello everyone :)

 

I have been way to busy over the last year to really put much effort into my ongoing website project due to my work. I hopped on since I started my holiday vacation, got the latest Club Greensock files (GSAP 3) and I have to thank you for gsap.effects and the smooth nature of how they can be injected into Timeline structures!!!

 

I had started animation grid of material and 3D model fades, scale and transition animations along with some basic photoShop graphic elements that fade, flicker and transition with the models and their materials a little over a year ago. Needless to say, I was structuring test code that was heavy and included a lot of switch cases and duplicated code within each switch case. It was working, but quite heavy and messy. Not to mention the fact that it was hard to iterate on O.o

 

After a day of looking into Gsap.Effects, I managed to redefine all of the animations for the models, model materials, and photoshop graphic elements in two RegisterEffect Functions.

 

I then just nested these into a master timeLine as I saw fit and "BOOM" many, many, many lines of code , switches and switch cases removed!

 

It is easy and quick to iterate on and my code is far easier to navigate!

 

@Carl All I can say and holy crap Thanks!!!! You guys are incredible! 

[Carl]

Hi @UbiAssassin

 

So glad to hear that you are having success with registerEffect()

 

I suspect you ran across my video

 

 

 

I regularly post about this on twitter as it's one of my favorite features and I feel that it is being under-utilized by the community.

 

It's really cool to hear you have made it a part of your workflow and you are experiencing the flexibility and time-saving features.

 

It's important to note that @GreenSock is the brains behind bringing it into existence and of course @ZachSaucier is a big part of everything that happens around here.

 

Thanks again for sharing your experience. We love hearing these reports.

Carl

 

[UbiAssassin]

@Carl That is exactly the video that I stumbled across and it was an eye opener. The first thing that I thought of was all of the duplicated animation calls in heavy switch case usages to manipulate the 3D models, materials and matching 2D shapes. I was able to just nest it all into 4 RegisterEffect functions like this one:

gsap.registerEffect({
		name: "FlashPlateTweenEngine",
		effect: (targets, config) => {
			let tlFlashPlateTweenControl = gsap.timeline();
			tlFlashPlateTweenControl.set(targets, { x: config.x, y: config.y })
				.to(targets, .25, { autoAlpha: 1 })
				.to(targets, .75, { autoAlpha: 0, ease: flashPlateBlendOutEase });
			return tlFlashPlateTweenControl;
		},
		extendTimeline: true
	});

From there, I was able to collapse all of the previous code into a number of simpler GridPlate Functions using a single master timeLine to control the entire animation. I used the .addLabel and .add statements to time the insertion and flow of each set of the 26 overall object animation calls and it is so much easier to tweak now!!!

 

I am sure that I can leverage this even more, and I it will be incredibly easy to tack on more animation complexity and detail now that the base is more efficient and straightforward

 

Great stuff!!!