Is SmoothScroll mandatory?

[tecoad]

Hi folks,

I am using this lib in my project without an issue, but i wonder if Smooth scroll is mandatory (i am aware we use the smooth scroll to keep sync between the dom and the canvas, however i also wonder if that shouldnt be optional?

Currently if we try to remove the Smooth scroll component, nothing is rendered at all.

Regards,

[ffdead]

Hi @tecoad - As you mention smooth scroll is used to make sure the scrolling and canvas is in lock-step sync.

For now the SmoothScrollbar takes care of sending scroll events to the canvas components - so to use the scroll-rig without smooth scroll, you still have to add the SmoothScrollbar but set enabled=false

Hope that helps!

[tecoad]

Thanks @ffdead!
Btw, my goal is to achieve a continuity zoom effect (similar to what is done on your project Cartier 365 (click on the element zooms and repositions it while maintaining fluidity).

I was trying to use before using the Drei's component, but ends up that it offers no method such as useCanvas, wasnt able to use Motion's layout animation on its parent either, due to off view scroll limitation), and also since View transition api works on snapshots, it doesnt animate the View on transition.

R3f-scroll-rig is my best bet since what i wanted has already been achieved on your project.
If you allow, my question is: what strategy did you use to match transition position there between element at origin and destination pages? Wasn't motion layout or view transition api, was it?

[ffdead]

what strategy did you use to match transition position there between element at origin and destination pages?

By default any child mesh inside a <UseCanvas> will be destroyed when it unmounts (when leaving a page). You can prevent that by setting dispose={false} and make sure to set a unique id so the child can be found again on the next page.

This is documented here but easy to miss as there isn't a demo for this feature yet.

/**
 * Persistent scene that stays rendered in between pages
 * - UseCanvas re-attaches with corrent DOM element when new page renders
 */
export function PersistentScrollScene({ id, track = {} }) {
  return (
    <UseCanvas
      dispose={false} // don't unmount the child when UseCanvas unmounts
      id={id} // unique layout ID used to re-attach this child when UseCanvas mounts again
      track={track} // update the dom element that the scrollscene is tracking to the one on the new page
    >
      <ScrollScene>{(props) => <MyMesh {...props} />}</ScrollScene>
    </UseCanvas>
  )
}

• the track parameter is automatically injected onto the persistent ScrollScene whenever it changes

function PageA() {
  return (
    <>
      <h1>Page A</h1>
      <!-- Track this DOM element on the first page -->
      <div ref={el}></div>
      <PersistentScrollScene id="myUniqueId" track={el} />
    </>
  )
}

function PageB() {
  return (
    <>
      <h1>Page B</h1>
      <!-- Switch and track this element on the next page instead -->
      <div ref={el}></div>
      <PersistentScrollScene id="myUniqueId" track={el} />
    </>
  )
}

This works - but the ScrollScene makes it hard to animate the mesh during the page transition as it will set the new position and scale immediately. We work around that by manually using useTracker(track) instead of a ScrollScene so that we have full control of when to scroll the mesh or pause to run a transition animation.. it's a bit complex but all depends on your use case 😅

[tecoad]

@ffdead Thanks for your reply.

<UseCanvas
dispose={false} // don't unmount the child when UseCanvas unmounts
id={id} // unique layout ID used to re-attach this child when UseCanvas mounts again
track={track} // update the dom element that the scrollscene is tracking to the one on the new page
>

1. UseCanvas seems to not have a track props. Is this correct? Official documentation states it has to be at ScrollScene
2. I am confused about the UseCanvas id. In my example, i am trying to render a simple mesh in the UseCanvas, which does render when it has not an id prop. If i add an id, then the element is not rendered.

And i do get this error:

Uncaught TypeError: Cannot assign to read only property 'id' of object '#<Mesh>'
    at applyProps (@14islands_r3f-scroll-rig.js?v=e95d9ece:55087:17)
    at handleContainerEffects (@14islands_r3f-scroll-rig.js?v=e95d9ece:55774:3)
    at handleContainerEffects (@14islands_r3f-scroll-rig.js?v=e95d9ece:55800:47)
    at appendChild (@14islands_r3f-scroll-rig.js?v=e95d9ece:55807:3)
    at appendChildToContainer (@14islands_r3f-scroll-rig.js?v=e95d9ece:55934:5)
    at insertOrAppendPlacementNodeIntoContainer (@14islands_r3f-scroll-rig.js?v=e95d9ece:7080:91)
    at insertOrAppendPlacementNodeIntoContainer (@14islands_r3f-scroll-rig.js?v=e95d9ece:7082:16)
    at insertOrAppendPlacementNodeIntoContainer (@14islands_r3f-scroll-rig.js?v=e95d9ece:7082:16)
    at insertOrAppendPlacementNodeIntoContainer (@14islands_r3f-scroll-rig.js?v=e95d9ece:7082:16)
    at insertOrAppendPlacementNodeIntoContainer (@14islands_r3f-scroll-rig.js?v=e95d9ece:7083:13)Understand this error
@14islands_r3f-scroll-rig.js?v=e95d9ece:55846 Uncaught TypeError: Cannot convert undefined or null to object
    at removeChild (@14islands_r3f-scroll-rig.js?v=e95d9ece:55846:16)
    at removeChild (@14islands_r3f-scroll-rig.js?v=e95d9ece:55843:5)
    at removeChild (@14islands_r3f-scroll-rig.js?v=e95d9ece:55843:5)
    at removeChildFromContainer (@14islands_r3f-scroll-rig.js?v=e95d9ece:55939:5)
    at runWithFiberInDEV (@14islands_r3f-scroll-rig.js?v=e95d9ece:741:18)
    at commitDeletionEffectsOnFiber (@14islands_r3f-scroll-rig.js?v=e95d9ece:7417:21)
    at recursivelyTraverseDeletionEffects (@14islands_r3f-scroll-rig.js?v=e95d9ece:7363:11)
    at commitDeletionEffectsOnFiber (@14islands_r3f-scroll-rig.js?v=e95d9ece:7487:13)
    at recursivelyTraverseDeletionEffects (@14islands_r3f-scroll-rig.js?v=e95d9ece:7363:11)
    at commitDeletionEffectsOnFiber (@14islands_r3f-scroll-rig.js?v=e95d9ece:7523:13)

See:
https://stackblitz.com/~/github.com/tecoad/r3f-test?file=src/routes/index.tsx

Am I doing something wrong here?

PS: Also tried to set dependencies (three, r3f, r3f/drei, react, react-dom) to the same as https://github.com/14islands/r3f-scroll-rig/blob/master/package.json), no success.

[ffdead]

@tecoad

1. UseCanvas seems to not have a track props. Is this correct? Official documentation states it has to be at ScrollScene

The props added to UseCanvas will be tunneled and applied to the child component running inside the GlobalCanvas. It automatically updates the canvas component's props when any of the them change - making them reactive. This wouldn't work otherwise as the UseCanvas is a tunnel which breaks reactivity

const [isOpen, setIsOpen] = useState(false)

return (
  <div onClick={() => setIsOpen(true)}>
  <UseCanvas isOpen={isOpen}>
    <MyMesh /* I will receieve all props from UseCanvas when they update */ />
  </UseCanvas>

2. I am confused about the UseCanvas id. In my example, i am trying to render a simple mesh in the UseCanvas, which does render when it has not an id prop. If i add an id, then the element is not rendered.

The id is also passed as a prop to the child in case it needs it later. In this case, the Mesh in threejs complains that it already has a readonly propery with the same name. You can pick it out and ignore it like this:

<UseCanvas dispose={false} id={id} track={track}>
  {({id, ...tunnelProps})=>(
    <ScrollScene {...tunnelProps}>
      {(props) => (
        <mesh {...props}>
          <planeGeometry />
          <meshBasicMaterial color="blue" />
        </mesh>
      )}
    </ScrollScene>
  )}
</UseCanvas>

[ffdead]

Actually, you could simplify it by doing this:

<UseCanvas dispose={false} id={id} track={track}>
	<ScrollScene>
		{({id, ...props}) => (
			<mesh {...props}>
				<planeGeometry />
				<meshBasicMaterial color="blue" />
			</mesh>
		)}
	</ScrollScene>
</UseCanvas>

And to avoid typescript errors you can define the required props on the child as well, just to satisfy the linter 😅

<UseCanvas dispose={false} id={id} track={track}>
	<ScrollScene track={track}>
        ...

[tecoad]

@ffdead My implementation would have the same dynamic as in Cartier 365: element is clicked then it transforms while moves to a new page.

So thanks for providing this useTracker tip.
Here is my current implementation:

https://stackblitz.com/~/github.com/tecoad/r3f-test?file=src/lib/animated-mesh.tsx

Is this more likely how you have implemented or can it be simplified?
Also: have you ever considered a component that would allow this behaviour? I see very common these 'view transitions api' like using threejs components. What do you think?

[ffdead]

Seems to work! It's a bit hard to make a component that handles this without forcing a specific animation library etc.

But I do think it's possible to simplify things, I just haven't felt comfortable generalizing it yet as it depends on the use case. Would probably be possible to make a generic component that covers some simple scenario!