getCSS - first implementation by ameerabuf · Pull Request #7 · wix/interact

ameerabuf · 2025-12-07T15:14:06Z

`generate(config: InteractConfig): string` — Examples

Note: namedEffect presets (e.g. FadeIn, ArcIn) are registered via registerEffects() before calling generate. Auto-generated effectIds appear as wi-<hash> in the output.

1. Entrance (viewEnter + namedEffect)

const entranceConfig: InteractConfig = {
    effects: {},
    interactions: [{
        key: 'i-k-1',
        trigger: 'viewEnter',
        effects: [{
            namedEffect: { type: 'FadeIn' }
        }]
    }]
}

@keyframes motion-fadeIn {
  0% {
    opacity: 0;
  }
}

[data-interact-key="i-k-1"] > :first-child {
  --transition-0-rvuqpla1vi: _;
}

[data-interact-key="i-k-1"]:where(:not([data-interact-enter])) > :first-child {
  --animation-0-rvuqpla1vi: motion-fadeIn 1ms 1ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 1 paused;
  --animation-composition-0-rvuqpla1vi: replace;
  --animation-timeline-0-rvuqpla1vi: none;
  --animation-range-0-rvuqpla1vi: normal;
  visibility: hidden;
  transform: none;
  translate: none;
  scale: none;
  rotate: none;
}

[data-interact-key="i-k-1"] > :first-child {
  animation: var(--animation-0-rvuqpla1vi, none);
  animation-composition: var(--animation-composition-0-rvuqpla1vi, replace);
  transition: var(--transition-0-rvuqpla1vi, _);
  animation-timeline: var(--animation-timeline-0-rvuqpla1vi, none);
  animation-range: var(--animation-range-0-rvuqpla1vi, normal);
}

2. Scroll (viewProgress + keyframeEffect)

const scrollConfig: InteractConfig = {
    effects: {},
    interactions: [{
        key: 'i-k-2',
        trigger: 'viewProgress',
        effects: [{
            keyframeEffect: { name: 'keyframeScroll', keyframes: [{ transform: 'translateX(100px)' }, { transform: 'translateX(-100px)' }] }
        }]
    }]
}

@keyframes keyframeScroll {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(-100px);
  }
}

[data-interact-key="i-k-2"] > :first-child {
  view-timeline: --trigger-0;
}

[data-interact-key="i-k-2"] > :first-child {
  --transition-0-rvv527nklb: _;
  --animation-0-rvv527nklb: keyframeScroll 99.99ms 0.01ms linear 1 ;
  --animation-composition-0-rvv527nklb: replace;
  --animation-timeline-0-rvv527nklb: --trigger-0;
  --animation-range-0-rvv527nklb: cover 0% cover 100%;
}

[data-interact-key="i-k-2"] > :first-child {
  animation: var(--animation-0-rvv527nklb, none);
  animation-composition: var(--animation-composition-0-rvv527nklb, replace);
  transition: var(--transition-0-rvv527nklb, _);
  animation-timeline: var(--animation-timeline-0-rvv527nklb, none);
  animation-range: var(--animation-range-0-rvv527nklb, normal);
}

3. Transition (hover + transition)

const transitionConfig: InteractConfig = {
    effects: {},
    interactions: [{
        key: 'i-k-3',
        trigger: 'hover',
        effects: [{
            transition: { styleProperties: [{ name: 'background-color', value: 'red' }] }
        }]
    }]
}

[data-interact-key="i-k-3"] > :first-child {
  --animation-0-rvvjeu11q7: none;
  --animation-composition-0-rvvjeu11q7: replace;
  --animation-timeline-0-rvvjeu11q7: none;
  --animation-range-0-rvvjeu11q7: normal;
  --transition-0-rvvjeu11q7: ;
}

[data-interact-key="i-k-3"]:where(:state(wi-ojpabaka), :--wi-ojpabaka, [data-interact-effect~="wi-ojpabaka"]) > :first-child {
  --background-color-rvvjeu11q7: red;
  background-color: var(--background-color-rvvjeu11q7, );
}

[data-interact-key="i-k-3"] > :first-child {
  animation: var(--animation-0-rvvjeu11q7, none);
  animation-composition: var(--animation-composition-0-rvvjeu11q7, replace);
  transition: var(--transition-0-rvvjeu11q7, _);
  animation-timeline: var(--animation-timeline-0-rvvjeu11q7, none);
  animation-range: var(--animation-range-0-rvvjeu11q7, normal);
}

4. Array Cascade (viewEnter + mixed effects with conditions)

const arrayCascadeConfig: InteractConfig = {
    effects: {},
    conditions: {
        'bp': { type: 'media', predicate: 'max-width: 1024px' },
        'selector': { type: 'selector', predicate: '.some-selector' },
    },
    interactions: [{
        key: 'i-k-4',
        trigger: 'viewEnter',
        effects: [
            {
                namedEffect: { type: 'FadeIn' }
            },
            {
                namedEffect: { type: 'ArcIn' }
            },
            {
                conditions: ['bp'],
                transition: { styleProperties: [{ name: 'background-color', value: 'red' }] }
            },
            {
                conditions: ['selector'],
                keyframeEffect: { name: 'keyframeCascade', keyframes: [{ transform: 'translateX(100px)' }, { transform: 'translateX(-100px)' }] }
            }
        ]
    }]
}

@keyframes motion-fadeIn {
  0% {
    opacity: 0;
  }
}

@keyframes motion-arcIn {
  0% {
    transform: perspective(var(--motion-perspective)) translateZ(var(--motion-depth-negative)) rotateX(calc(var(--motion-arc-x) * var(--motion-arc-sign) * 80deg)) rotateY(calc(var(--motion-arc-y) * var(--motion-arc-sign) * 80deg)) translateZ(var(--motion-depth-positive)) rotate(var(--motion-rotate, 0deg));
  }
  100% {
    transform: perspective(var(--motion-perspective)) translateZ(var(--motion-depth-negative)) rotateX(0deg) rotateY(0deg) translateZ(var(--motion-depth-positive)) rotate(var(--motion-rotate, 0deg));
  }
}

@keyframes keyframeCascade {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(-100px);
  }
}

[data-interact-key="i-k-4"] > :first-child {
  --transition-0-rvvxrgeke6: _;
}

[data-interact-key="i-k-4"]:where(:not([data-interact-enter])) > :first-child {
  --animation-0-rvvxrgeke6: motion-fadeIn 1ms 1ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 1 paused;
  --animation-composition-0-rvvxrgeke6: replace;
  --animation-timeline-0-rvvxrgeke6: none;
  --animation-range-0-rvvxrgeke6: normal;
  visibility: hidden;
  transform: none;
  translate: none;
  scale: none;
  rotate: none;
}

[data-interact-key="i-k-4"] > :first-child {
  --transition-0-rvvxrgeke6: _;
  --motion-perspective: 800px;
  --motion-arc-x: 0;
  --motion-arc-y: 1;
  --motion-arc-sign: 1;
  --motion-depth-negative: calc(-1 * 200px / 2);
  --motion-depth-positive: calc(200px / 2);
}

[data-interact-key="i-k-4"]:where(:not([data-interact-enter])) > :first-child {
  --animation-0-rvvxrgeke6: motion-fadeIn 0.7ms 1ms cubic-bezier(0.47, 0, 0.745, 0.715) 1 paused, motion-arcIn 1ms 1ms cubic-bezier(0.86, 0, 0.07, 1) 1 paused;
  --animation-composition-0-rvvxrgeke6: replace, replace;
  --animation-timeline-0-rvvxrgeke6: none, none;
  --animation-range-0-rvvxrgeke6: normal, normal;
  visibility: hidden;
  transform: none;
  translate: none;
  scale: none;
  rotate: none;
}

@media (max-width: 1024px) {
  [data-interact-key="i-k-4"] > :first-child {
    --animation-0-rvvxrgeke6: none;
    --animation-composition-0-rvvxrgeke6: replace;
    --animation-timeline-0-rvvxrgeke6: none;
    --animation-range-0-rvvxrgeke6: normal;
    --transition-0-rvvxrgeke6: ;
  }
}

@media (max-width: 1024px) {
  [data-interact-key="i-k-4"]:where(:state(wi-pphgphgj), :--wi-pphgphgj, [data-interact-effect~="wi-pphgphgj"]) > :first-child {
    --background-color-rvvxrgeke6: red;
    background-color: var(--background-color-rvvxrgeke6, );
  }
}

[data-interact-key="i-k-4"] > :first-child:where(.some-selector) {
  --background-color-rvvxrgeke6:  ;
  --transition-0-rvvxrgeke6: _;
}

[data-interact-key="i-k-4"]:where(:not([data-interact-enter])) > :first-child:where(.some-selector) {
  --animation-0-rvvxrgeke6: keyframeCascade 1ms 1ms linear 1 paused;
  --animation-composition-0-rvvxrgeke6: replace;
  --animation-timeline-0-rvvxrgeke6: none;
  --animation-range-0-rvvxrgeke6: normal;
  visibility: hidden;
  transform: none;
  translate: none;
  scale: none;
  rotate: none;
}

[data-interact-key="i-k-4"] > :first-child {
  animation: var(--animation-0-rvvxrgeke6, none);
  animation-composition: var(--animation-composition-0-rvvxrgeke6, replace);
  transition: var(--transition-0-rvvxrgeke6, _);
  animation-timeline: var(--animation-timeline-0-rvvxrgeke6, none);
  animation-range: var(--animation-range-0-rvvxrgeke6, normal);
}

5. Sequence (viewEnter + sequence with conditions)

const sequenceConfig: InteractConfig = {
    effects: {},
    conditions: {
        'bp': { type: 'media', predicate: 'max-width: 1024px' },
        'selector': { type: 'selector', predicate: '.some-selector' },
    },
    interactions: [{
        key: 'i-k-5',
        trigger: 'viewEnter',
        sequences: [{
            effects: [
                {
                    namedEffect: { type: 'FadeIn' }
                },
                {
                    namedEffect: { type: 'ArcIn' }
                },
                {
                    conditions: ['bp'],
                    transition: { styleProperties: [{ name: 'background-color', value: 'red' }] }
                },
                {
                    conditions: ['selector'],
                    keyframeEffect: { name: 'keyframeCascade', keyframes: [{ transform: 'translateX(100px)' }, { transform: 'translateX(-100px)' }] }
                }
            ]
        }]
    }]
}

@keyframes motion-fadeIn {
  0% {
    opacity: 0;
  }
}

@keyframes motion-arcIn {
  0% {
    transform: perspective(var(--motion-perspective)) translateZ(var(--motion-depth-negative)) rotateX(calc(var(--motion-arc-x) * var(--motion-arc-sign) * 80deg)) rotateY(calc(var(--motion-arc-y) * var(--motion-arc-sign) * 80deg)) translateZ(var(--motion-depth-positive)) rotate(var(--motion-rotate, 0deg));
  }
  100% {
    transform: perspective(var(--motion-perspective)) translateZ(var(--motion-depth-negative)) rotateX(0deg) rotateY(0deg) translateZ(var(--motion-depth-positive)) rotate(var(--motion-rotate, 0deg));
  }
}

@keyframes keyframeCascade {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(-100px);
  }
}

[data-interact-key="i-k-5"] > :first-child {
  --transition-0-0-rvwc42s1j2: _;
}

[data-interact-key="i-k-5"]:where(:not([data-interact-enter])) > :first-child {
  --animation-0-0-rvwc42s1j2: motion-fadeIn 1ms 1ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 1 paused;
  --animation-composition-0-0-rvwc42s1j2: replace;
  --animation-timeline-0-0-rvwc42s1j2: none;
  --animation-range-0-0-rvwc42s1j2: normal;
  visibility: hidden;
  transform: none;
  translate: none;
  scale: none;
  rotate: none;
}

[data-interact-key="i-k-5"] > :first-child {
  --transition-0-1-rvwc42s1j2: _;
  --motion-perspective: 800px;
  --motion-arc-x: 0;
  --motion-arc-y: 1;
  --motion-arc-sign: 1;
  --motion-depth-negative: calc(-1 * 200px / 2);
  --motion-depth-positive: calc(200px / 2);
}

[data-interact-key="i-k-5"]:where(:not([data-interact-enter])) > :first-child {
  --animation-0-1-rvwc42s1j2: motion-fadeIn 0.7ms 1ms cubic-bezier(0.47, 0, 0.745, 0.715) 1 paused, motion-arcIn 1ms 1ms cubic-bezier(0.86, 0, 0.07, 1) 1 paused;
  --animation-composition-0-1-rvwc42s1j2: replace, replace;
  --animation-timeline-0-1-rvwc42s1j2: none, none;
  --animation-range-0-1-rvwc42s1j2: normal, normal;
  visibility: hidden;
  transform: none;
  translate: none;
  scale: none;
  rotate: none;
}

@media (max-width: 1024px) {
  [data-interact-key="i-k-5"] > :first-child {
    --animation-0-2-rvwc42s1j2: none;
    --animation-composition-0-2-rvwc42s1j2: replace;
    --animation-timeline-0-2-rvwc42s1j2: none;
    --animation-range-0-2-rvwc42s1j2: normal;
    --transition-0-2-rvwc42s1j2: ;
  }
}

@media (max-width: 1024px) {
  [data-interact-key="i-k-5"]:where(:state(wi-deielenl), :--wi-deielenl, [data-interact-effect~="wi-deielenl"]) > :first-child {
    --background-color-rvwc42s1j2: red;
    background-color: var(--background-color-rvwc42s1j2, );
  }
}

[data-interact-key="i-k-5"] > :first-child:where(.some-selector) {
  --transition-0-3-rvwc42s1j2: _;
}

[data-interact-key="i-k-5"]:where(:not([data-interact-enter])) > :first-child:where(.some-selector) {
  --animation-0-3-rvwc42s1j2: keyframeCascade 1ms 1ms linear 1 paused;
  --animation-composition-0-3-rvwc42s1j2: replace;
  --animation-timeline-0-3-rvwc42s1j2: none;
  --animation-range-0-3-rvwc42s1j2: normal;
  visibility: hidden;
  transform: none;
  translate: none;
  scale: none;
  rotate: none;
}

[data-interact-key="i-k-5"] > :first-child {
  --animation-0-rvwc42s1j2: var(--animation-0-0-rvwc42s1j2, none), var(--animation-0-1-rvwc42s1j2, none), var(--animation-0-2-rvwc42s1j2, none), var(--animation-0-3-rvwc42s1j2, none);
  --animation-composition-0-rvwc42s1j2: var(--animation-composition-0-0-rvwc42s1j2, replace), var(--animation-composition-0-1-rvwc42s1j2, replace), var(--animation-composition-0-2-rvwc42s1j2, replace), var(--animation-composition-0-3-rvwc42s1j2, replace);
  --transition-0-rvwc42s1j2: var(--transition-0-0-rvwc42s1j2, _), var(--transition-0-1-rvwc42s1j2, _), var(--transition-0-2-rvwc42s1j2, _), var(--transition-0-3-rvwc42s1j2, _);
  --animation-timeline-0-rvwc42s1j2: var(--animation-timeline-0-0-rvwc42s1j2, none), var(--animation-timeline-0-1-rvwc42s1j2, none), var(--animation-timeline-0-2-rvwc42s1j2, none), var(--animation-timeline-0-3-rvwc42s1j2, none);
  --animation-range-0-rvwc42s1j2: var(--animation-range-0-0-rvwc42s1j2, normal), var(--animation-range-0-1-rvwc42s1j2, normal), var(--animation-range-0-2-rvwc42s1j2, normal), var(--animation-range-0-3-rvwc42s1j2, normal);
}

[data-interact-key="i-k-5"] > :first-child {
  animation: var(--animation-0-rvwc42s1j2, none);
  animation-composition: var(--animation-composition-0-rvwc42s1j2, replace);
  transition: var(--transition-0-rvwc42s1j2, _);
  animation-timeline: var(--animation-timeline-0-rvwc42s1j2, none);
  animation-range: var(--animation-range-0-rvwc42s1j2, normal);
}

6. Multi-Interaction (multiple triggers + sequence + conditions)

const multiInteractionConfig: InteractConfig = {
    effects: {},
    conditions: {
        'bp': { type: 'media', predicate: 'max-width: 1024px' },
        'selector': { type: 'selector', predicate: '.some-selector' },
    },
    interactions: [
        {
            key: 'i-k-6',
            trigger: 'viewEnter',
            effects: [{
                namedEffect: { type: 'FadeIn' }
            }]
        },
        {
            key: 'diff-key',
            trigger: 'hover',
            effects: [{
                key: 'i-k-6',
                transition: { styleProperties: [{ name: 'background-color', value: 'red' }] }
            }]
        },
        {
            key: 'i-k-6',
            trigger: 'viewEnter',
            sequences: [{
                effects: [
                    {
                        namedEffect: { type: 'ArcIn' }
                    },
                    {
                        conditions: ['bp'],
                        transition: { styleProperties: [{ name: 'background-color', value: 'red' }] }
                    },
                    {
                        conditions: ['selector'],
                        keyframeEffect: { name: 'keyframeCascade', keyframes: [{ transform: 'translateX(100px)' }, { transform: 'translateX(-100px)' }] }
                    }
                ]
            }]
        },
    ]
}

@keyframes motion-fadeIn {
  0% {
    opacity: 0;
  }
}

@keyframes motion-arcIn {
  0% {
    transform: perspective(var(--motion-perspective)) translateZ(var(--motion-depth-negative)) rotateX(calc(var(--motion-arc-x) * var(--motion-arc-sign) * 80deg)) rotateY(calc(var(--motion-arc-y) * var(--motion-arc-sign) * 80deg)) translateZ(var(--motion-depth-positive)) rotate(var(--motion-rotate, 0deg));
  }
  100% {
    transform: perspective(var(--motion-perspective)) translateZ(var(--motion-depth-negative)) rotateX(0deg) rotateY(0deg) translateZ(var(--motion-depth-positive)) rotate(var(--motion-rotate, 0deg));
  }
}

@keyframes keyframeCascade {
  0% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(-100px);
  }
}

[data-interact-key="i-k-6"] > :first-child {
  --transition-0-rvwqgp5k8v: _;
}

[data-interact-key="i-k-6"]:where(:not([data-interact-enter])) > :first-child {
  --animation-0-rvwqgp5k8v: motion-fadeIn 1ms 1ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 1 paused;
  --animation-composition-0-rvwqgp5k8v: replace;
  --animation-timeline-0-rvwqgp5k8v: none;
  --animation-range-0-rvwqgp5k8v: normal;
  visibility: hidden;
  transform: none;
  translate: none;
  scale: none;
  rotate: none;
}

[data-interact-key="i-k-6"] > :first-child {
  --animation-1-rvwqgp5k8v: none;
  --animation-composition-1-rvwqgp5k8v: replace;
  --animation-timeline-1-rvwqgp5k8v: none;
  --animation-range-1-rvwqgp5k8v: normal;
  --transition-1-rvwqgp5k8v: ;
}

[data-interact-key="i-k-6"]:where(:state(wi-gighaacb), :--wi-gighaacb, [data-interact-effect~="wi-gighaacb"]) > :first-child {
  --background-color-rvwqgp5k8v: red;
  background-color: var(--background-color-rvwqgp5k8v, );
}

[data-interact-key="i-k-6"] > :first-child {
  --transition-2-0-rvwqgp5k8v: _;
  --motion-perspective: 800px;
  --motion-arc-x: 0;
  --motion-arc-y: 1;
  --motion-arc-sign: 1;
  --motion-depth-negative: calc(-1 * 200px / 2);
  --motion-depth-positive: calc(200px / 2);
}

[data-interact-key="i-k-6"]:where(:not([data-interact-enter])) > :first-child {
  --animation-2-0-rvwqgp5k8v: motion-fadeIn 0.7ms 1ms cubic-bezier(0.47, 0, 0.745, 0.715) 1 paused, motion-arcIn 1ms 1ms cubic-bezier(0.86, 0, 0.07, 1) 1 paused;
  --animation-composition-2-0-rvwqgp5k8v: replace, replace;
  --animation-timeline-2-0-rvwqgp5k8v: none, none;
  --animation-range-2-0-rvwqgp5k8v: normal, normal;
  visibility: hidden;
  transform: none;
  translate: none;
  scale: none;
  rotate: none;
}

@media (max-width: 1024px) {
  [data-interact-key="i-k-6"] > :first-child {
    --animation-2-1-rvwqgp5k8v: none;
    --animation-composition-2-1-rvwqgp5k8v: replace;
    --animation-timeline-2-1-rvwqgp5k8v: none;
    --animation-range-2-1-rvwqgp5k8v: normal;
    --transition-2-1-rvwqgp5k8v: ;
  }
}

@media (max-width: 1024px) {
  [data-interact-key="i-k-6"]:where(:state(wi-ljoehbpe), :--wi-ljoehbpe, [data-interact-effect~="wi-ljoehbpe"]) > :first-child {
    --background-color-rvwqgp5k8v: red;
    background-color: var(--background-color-rvwqgp5k8v, );
  }
}

[data-interact-key="i-k-6"] > :first-child:where(.some-selector) {
  --transition-2-2-rvwqgp5k8v: _;
}

[data-interact-key="i-k-6"]:where(:not([data-interact-enter])) > :first-child:where(.some-selector) {
  --animation-2-2-rvwqgp5k8v: keyframeCascade 1ms 1ms linear 1 paused;
  --animation-composition-2-2-rvwqgp5k8v: replace;
  --animation-timeline-2-2-rvwqgp5k8v: none;
  --animation-range-2-2-rvwqgp5k8v: normal;
  visibility: hidden;
  transform: none;
  translate: none;
  scale: none;
  rotate: none;
}

[data-interact-key="i-k-6"] > :first-child {
  --animation-2-rvwqgp5k8v: var(--animation-2-0-rvwqgp5k8v, none), var(--animation-2-1-rvwqgp5k8v, none), var(--animation-2-2-rvwqgp5k8v, none);
  --animation-composition-2-rvwqgp5k8v: var(--animation-composition-2-0-rvwqgp5k8v, replace), var(--animation-composition-2-1-rvwqgp5k8v, replace), var(--animation-composition-2-2-rvwqgp5k8v, replace);
  --transition-2-rvwqgp5k8v: var(--transition-2-0-rvwqgp5k8v, _), var(--transition-2-1-rvwqgp5k8v, _), var(--transition-2-2-rvwqgp5k8v, _);
  --animation-timeline-2-rvwqgp5k8v: var(--animation-timeline-2-0-rvwqgp5k8v, none), var(--animation-timeline-2-1-rvwqgp5k8v, none), var(--animation-timeline-2-2-rvwqgp5k8v, none);
  --animation-range-2-rvwqgp5k8v: var(--animation-range-2-0-rvwqgp5k8v, normal), var(--animation-range-2-1-rvwqgp5k8v, normal), var(--animation-range-2-2-rvwqgp5k8v, normal);
}

[data-interact-key="i-k-6"] > :first-child {
  animation: var(--animation-0-rvwqgp5k8v, none), var(--animation-1-rvwqgp5k8v, none), var(--animation-2-rvwqgp5k8v, none);
  animation-composition: var(--animation-composition-0-rvwqgp5k8v, replace), var(--animation-composition-1-rvwqgp5k8v, replace), var(--animation-composition-2-rvwqgp5k8v, replace);
  transition: var(--transition-0-rvwqgp5k8v, _), var(--transition-1-rvwqgp5k8v, _), var(--transition-2-rvwqgp5k8v, _);
  animation-timeline: var(--animation-timeline-0-rvwqgp5k8v, none), var(--animation-timeline-1-rvwqgp5k8v, none), var(--animation-timeline-2-rvwqgp5k8v, none);
  animation-range: var(--animation-range-0-rvwqgp5k8v, normal), var(--animation-range-1-rvwqgp5k8v, normal), var(--animation-range-2-rvwqgp5k8v, normal);
}

ydaniv

First iteration, didn't cover all yet.

ameerabuf added 4 commits December 7, 2025 17:12

getCSS - first implementation

6ed31bc

fix build and lint

c8102db

Merge branch 'master' of github.com:wix-incubator/interact into get_css

094cbf7

gitignore

f111288

ydaniv requested changes Dec 9, 2025

View reviewed changes

Comment thread packages/interact/src/core/getCSS.ts Outdated

Comment thread packages/interact/src/core/getCSS.ts Outdated

Comment thread packages/interact/src/core/getCSS.ts Outdated

Comment thread packages/interact/src/core/getCSS.ts Outdated

ameerabuf added 9 commits December 15, 2025 17:26

wip

9f34f35

Merge branch 'master' of github.com:wix-incubator/interact into get_css

36fd96e

wip

b117e78

Merge branch 'master' of github.com:wix-incubator/interact into get_css

72b6f90

wip

8a0c428

wip

c030958

wip

f6917c1

fixing conditions cascading logic and transitions

e084981

updated tests

38f5df3

ydaniv requested changes Dec 31, 2025

View reviewed changes

ydaniv requested changes Jan 1, 2026

View reviewed changes

Comment thread packages/interact/src/utils.ts Outdated

ameerabuf and others added 3 commits January 4, 2026 13:44

Merge branch 'master' of github.com:wix-incubator/interact into get_css

1085c50

PR comments

005a624

Merge branch 'master' into get_css

dc008a6

ydaniv requested changes Jan 7, 2026

View reviewed changes

ameerabuf added 5 commits January 11, 2026 12:35

Merge branch 'get_css' of github.com:wix-incubator/interact into get_css

f280704

Merge branch 'master' of github.com:wix-incubator/interact into get_css

54208db

PR fixes

a41f451

PR fixes

29abbe8

infra changes

bb114f4

ameerabuf requested a review from ydaniv January 11, 2026 22:32

ameerabuf added 3 commits January 12, 2026 00:33

docs and demo - v1

1dfe84b

docs and demo - v1

a7d644d

Merge branch 'master' of github.com:wix-incubator/interact into get_css

39eca8e

ydaniv requested changes Jan 13, 2026

View reviewed changes

ameerabuf and others added 19 commits April 14, 2026 18:34

wip

c5c90e3

wip

1433546

wip

a190b06

wip

dbe9dce

wip

e7bb50b

wip

a5f791f

wip

73c2293

Merge branch 'master' of github.com:wix-incubator/interact into get_css

6c6693d

wip

ca228bd

wip

859c9b1

wip

f2a1701

wip

222de0e

wip

bace05a

wip

f696caf

wip

14654f9

wip

514c61e

Merge branch 'master' into get_css

4d52382

Merge branch 'get_css' of github.com:wix-incubator/interact into get_css

04b3822

wip

b7e8f5e

ydaniv requested changes Apr 19, 2026

View reviewed changes

ameerabuf and others added 10 commits April 26, 2026 11:44

Merge branch 'master' of github.com:wix-incubator/interact into get_css

5d1c6ce

some PR fixes

b857beb

some PR fixes

474dc38

some PR fixes

d2b3ad9

some PR fixes

f7787ef

some PR fixes

be23525

some PR fixes

27c6ae8

some PR fixes

b4cb3f0

some PR fixes

9cfca48

Merge branch 'master' into get_css

dc02e70

Conversation

ameerabuf commented Dec 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

generate(config: InteractConfig): string — Examples

1. Entrance (viewEnter + namedEffect)

2. Scroll (viewProgress + keyframeEffect)

3. Transition (hover + transition)

4. Array Cascade (viewEnter + mixed effects with conditions)

5. Sequence (viewEnter + sequence with conditions)

6. Multi-Interaction (multiple triggers + sequence + conditions)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ydaniv left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ameerabuf commented Dec 7, 2025 •

edited

Loading

`generate(config: InteractConfig): string` — Examples