Feat:: Shape Transition Effect:: Adding a demo section13 with the Shape transition effect

[Robpayot]

Adding a demo section 13 with the new shape transition effect.

Notes

• Added a shape.js transitions in the transitions folder, in can be called like so:

const fade = transitions.shape();
// init kampos
const instance = new Kampos({ target, effects: [fade] });

• Added a shape-transition.js in the demo folder file to show a demo of it.
• In this demo I'm using a custom button conditionally, just to show the transition easily just by clicking (added in iFrame)
• I also added the lil-gui lib in the demo iframes to easily show all the possibilities within the shape effect. (can be remove once you have decided what GUI parameters to keep)
• I added the gsap lib in the demo iframes just to have an nice easing transition. I know it's not mandatory but I really encourage to use easing for smoother effect for the future of the library. You don't need to use gsap lib I just did it to save me some time, but it can be done using time variables in a RAF function using these

Questions

Is there a reason why it's using iframes to show the different demos?

I got several issues because of that: I couldn't see my logs showing in Chrome because they come from inside an iframe. Hopefully the logs are showing on Firefox so I could debug on that.
I got some cache clear issues, disabling cache when the console is open seems to work most of the time.
It's not convenient to import common functions/utilities through different demos.

My suggestion would be to use different html files (1 for each demo) with their own js final build. That's possible in rollup or vite using the input configuration. That's what I did for : https://robin-wix-xp.vercel.app/circles-transition/ / https://robin-wix-xp.vercel.app/grid-offset/ (I'm using vite but it's using rollup under the hood)

Not a priority of course. I need to move on on other effects and using iframes for demos is working for me now, but might be useful in the future.

Things to implement in Wix (I guess)

The effect is ready but it's using the default params by default. I think ideally for the user they will be able to use some of the GUI/DEFAULT parameter. In that case you can change this:

export default function () {
    /**
     * @typedef {Object} shapeTransitionEffect
     * @property {ArrayBufferView|ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|ImageBitmap} to media source to transition into
     * @property {number} progress number between 0.0 and 1.0
     * @property {boolean} disabled
     *
     * @example
     * effect.to = document.querySelector('#video-to');
     * effect.progress = 0.5;
     */

    // TODO: get uniforms params from the

    // Default Uniforms values
    const DEFAULT = {
        progress: 0,
        nbDivider: 50,
        shapeBorder: 0.15,
        shape: 1, // 1, 2 or 3 , see demo
        direction: 3, // 1, 2, 3 , 4, 5 see demo
        effect: 1, // 1, 2 or 3 , see demo
        bkgColor: '#121212',
        brightness: false,
        maxBrightness: 1,
        overlayColor: false,
    };

into this:

export default function ({
        progress = 0,
        nbDivider = 50,
        shapeBorder = 0.15,
        shape = 1, // 1, 2 or 3 , see demo
        direction = 3, // 1, 2, 3 , 4, 5 see demo
        effect = 1, // 1, 2 or 3 , see demo
        bkgColor = '#121212',
        brightness = false,
        maxBrightness = 1,
        overlayColor = false}) {
    /**
     * @typedef {Object} shapeTransitionEffect
     * @property {ArrayBufferView|ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|ImageBitmap} to media source to transition into
     * @property {number} progress number between 0.0 and 1.0
     * @property {boolean} disabled
     *
     * @example
     * effect.to = document.querySelector('#video-to');
     * effect.progress = 0.5;
     */

So each parameter can be set up like this:

const fade = transitions.shape({nbDivider: 20, shape: 2, brightnessEnabled: true});

// init kampos
const instance = new Kampos({ target, effects: [fade] });

---

Screen.Recording.2025-02-09.at.18.19.56.mp4

[ydaniv]

Good work! Some comments.

[ydaniv]

I rather not use GSAP, but it's ok to leave it to me to later replace it with native code.

[Robpayot]

Ok, yes Like I said that was only to have a smooth transition but feel free to make your own in a RAF using https://github.com/AndrewRayCode/easing-utils/blob/master/src/easing.js We could remove it

[ydaniv]

Suggested change

	const resiveHandler = () => {
	const resizeHandler = () => {

[ydaniv]

Suggested change

	window.addEventListener('resize', resiveHandler);
	window.addEventListener('resize', resizeHandler);

[ydaniv]

Suggested change

	instance.play();
	resiveHandler();
	resizeHandler();
	instance.play();

[ydaniv]

I think this one is not needed

[ydaniv]

we have a utility for this, though we don't yet have a way to enforce it or require it automatically. So not sure what's best here.

[Robpayot]

I see that I can import the resolution utility in demo/shape-transition.js. But I can't import it in src/transitions/shape.js . To me it would make more sense to use it in src/transitions/shape.js directly and merge it to the other uniforms but not sure how to do that with the current implementation. So I'm not using it for now but would be nice in the future, let me know if you see an easy solution 👍🏻

[ydaniv]

I don't think we need shape as a uniform. Probably would be better off as a string parameter of the constructor, that we put directly into the template of the shader. Can be enum of 'circle', 'diamond', 'square'.
It's possible to have these set on the exported function, like we did with enums in displacement effect for example.

[Robpayot]

I added some uniforms as params of the shape function. I used ENUM, it's a good idea to have a cleaner approach of what are the differents param possibilities for shape, effect and direction.