Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Svelte transition in Canvas #451

Closed
robthepaper opened this issue Jul 10, 2023 · 2 comments
Closed

Svelte transition in Canvas #451

robthepaper opened this issue Jul 10, 2023 · 2 comments
Assignees
@grischaerbe
Labels
bug Something isn't working

Comments

@robthepaper
Copy link

robthepaper commented Jul 10, 2023 •
edited

Hi, I'm trying to do transition of elements that are inside Canvas but it does'nt seem to work.

I have this for example :

{#if visible}
	<div in:fade out:fade>
		<T.Mesh position={[0, 0, -50]} rotation={[0.05, Math.PI, 0]} scale={[2, 2, 1]} {material}>
			<T.SphereGeometry args={[0.5]} />
			<HTML position.y={1.25} position.z={$htmlPosZ} transform>
				<button
					on:pointerenter={() => (isHovering = true)}
					on:pointerleave={() => {
						isPointerDown = false
						isHovering = false
					}}
					on:pointerdown={() => (isPointerDown = true)}
					on:pointerup={() => (isPointerDown = false)}
					on:pointercancel={() => {
						isPointerDown = false
						isHovering = false
					}}
					on:click={onClick}
					class="button bg-orange-500 rounded-full px-3 text-white hover:opacity-90 active:opacity-70"
				>
					I'm a regular HTML button
				</button>
			</HTML>
			<HTML position.x={0.75} transform pointerEvents="none">
				<p class="text-xs w-auto translate-x-1/2 drop-shadow-lg" style="color: #{material.color.getHexString()}">
					color: #{material.color.getHexString()}
				</p>
			</HTML>
		</T.Mesh>
	</div>
{/if}

then when I switch visible to true or false, the T.Mesh appears and disappears without the fade transition.

For now I am doing this to do transition :

{#if visible}
  <div in:fade out:fade class="absolute">
	  <div class="CanvasContainer">
		  <Canvas>
			  <Scene/>
		  </Canvas>
	  </div>
  </div>
{/if}

Is there a better way to do scene transition?
@grischaerbe grischaerbe added the bug Something isn't working label Jul 26, 2023
@grischaerbe
Copy link
Collaborator

This might be due to a change in Svelte 4 which runs transitions locally by default now. I'll investigate!

@grischaerbe grischaerbe self-assigned this Aug 14, 2023
@grischaerbe
Copy link
Collaborator

@robotpapier you're mixing Svelte transitions with Threlte transitions. You cannot place DOM elements inside <Canvas>. Please provide a repository so we can check. I consider this closed, we can of course repoen at any time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@grischaerbe grischaerbe

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@robthepaper @grischaerbe