Fix animation

Author: owjs3901

src/codegen/Codegen.ts

@@ -82,7 +82,6 @@ export class Codegen {
     const assetNode = checkAssetNode(node)
     if (assetNode) {
       const props = await getProps(node)
-      console.log('props', props)
       props.src = `/${assetNode === 'svg' ? 'icons' : 'images'}/${node.name}.${assetNode}`
       if (assetNode === 'svg') {
         const maskColor = await checkSameColor(node)

src/codegen/props/index.ts

@@ -22,7 +22,6 @@ import { getVisibilityProps } from './visibility'
 export async function getProps(
   node: SceneNode,
 ): Promise<Record<string, unknown>> {
-  console.log('getProps', getLayoutProps(node))
   return {
     ...getAutoLayoutProps(node),
     ...getMinMaxProps(node),

src/codegen/props/position.ts

@@ -1,4 +1,5 @@
 import { addPx } from '../utils/add-px'
+import { checkAssetNode } from '../utils/check-asset-node'
 import { isPageRoot } from '../utils/is-page-root'
 
 export function isFreelayout(node: BaseNode & ChildrenMixin) {
@@ -105,6 +106,7 @@ export function getPositionProps(
   }
   if (
     'children' in node &&
+    !checkAssetNode(node) &&
     (node.children.some(
       (child) =>
         'layoutPositioning' in child && child.layoutPositioning === 'ABSOLUTE',

src/codegen/props/transform.ts

@@ -4,7 +4,7 @@ import { canBeAbsolute } from './position'
 export function getTransformProps(
   node: SceneNode,
 ): Record<string, boolean | string | number | undefined | null> | undefined {
-  if ('rotation' in node && node.rotation !== 0)
+  if ('rotation' in node && Math.abs(node.rotation) > 0.01)
     return {
       transform: `rotate(${fmtPct(-node.rotation)}deg)`,
       transformOrigin: canBeAbsolute(node) ? 'top left' : undefined,

src/codegen/responsive/ResponsiveCodegen.ts

@@ -57,7 +57,6 @@ export class ResponsiveCodegen {
       const tree = await codegen.getTree()
       breakpointTrees.set(bp, tree)
     }
-    console.log('breakpointTrees', breakpointTrees)
 
     // Merge trees and generate code.
     return this.generateMergedCode(breakpointTrees, 0)

src/codegen/utils/check-asset-node.ts

@@ -1,5 +1,30 @@
+function hasSmartAnimateReaction(node: BaseNode | null): boolean {
+  if (!node || node.type === 'DOCUMENT' || node.type === 'PAGE') return false
+  if (
+    'reactions' in node &&
+    node.reactions?.some((reaction) =>
+      reaction.actions?.some(
+        (action) =>
+          action.type === 'NODE' && action.transition?.type === 'SMART_ANIMATE',
+      ),
+    )
+  )
+    return true
+  return false
+}
+
+function isAnimationTarget(node: SceneNode): boolean {
+  // Check if node itself has SMART_ANIMATE
+  if (hasSmartAnimateReaction(node)) return true
+  // Check if parent has SMART_ANIMATE (node is animation target as child)
+  if (node.parent && hasSmartAnimateReaction(node.parent)) return true
+  return false
+}
+
 export function checkAssetNode(node: SceneNode): 'svg' | 'png' | null {
   if (node.type === 'TEXT' || node.type === 'COMPONENT_SET') return null
+  // if node is an animation target (has keyframes), it should not be treated as an asset
+  if (isAnimationTarget(node)) return null
   // vector must be svg
   if (['VECTOR', 'STAR', 'POLYGON'].includes(node.type)) return 'svg'
   // ellipse with inner radius must be svg