Jump to content
Search Community

JanaB

Members
  • Posts

    6
  • Joined

  • Last visited

JanaB's Achievements

  1. Thank you, Rodrigo! First solution worked well for me. I've wrapped it inside onComplete. onComplete: function() { tl.invalidate(); }
  2. Thanks Rodrigo! I've added it back now. That brings me back to my initial problem with the model not rotating to it's original position. I've set controls.enableRotate for screen 2 and screen 3 so that when the model has been moved/rotated it would go back to it's original position on scroll. Unfortunately it's not returning to its original position on scroll. I've created a 'reset' button with the following code, to show what I'm after. This is rendered on click, but I'd like the same to be rendered on scroll. Is there a way to incorporate it with the timeline? let returnToOriginalDesktop = gsap.timeline({ duration: 2, paused: true, immediateRender: false }); returnToOriginalDesktop.to( camera.position, { x: 0, y: 0, z: 3.7, duration: 1 }, "<" ); document .querySelector(".reset-model") .addEventListener("pointerdown", function () { returnToOriginalDesktop.play(); returnToOriginalDesktop.restart(); }); You mentioned camera position values are the same and therefore they're not being updated. Is there another workaround for the same logic? Thanks!
  3. Hi Cassie, Thanks so much for getting back to me and thanks for your suggestions re. intersection observer! It now looks very close to what I'm trying to achieve - one thing I cannot figure out is how to make the animation(timelines) look continuous. I've added camera.position to each one of those timelines as that helps with controls and resetting the position of the model if it's been rotated on screen 2 and 3. It's adding the new problem though - animation seems to restart each time it's scrolled rather than flowing smoothly. https://codepen.io/janabobulis/pen/yLGyZrQ?editors=0010
  4. I've now changed it to cube model instead, hopefully this is helpful? - https://codepen.io/janabobulis/pen/vYvEmmL I don't have a lot of experience with ScrollTrigger so maybe there's something I'm missing? It works as expected when scrolling down, but not when scrolling back up.
  5. Hi @mvaneijgen, Would GitHub link be of any help? I cannot seem to work out how to get it to Stackblitz. https://github.com/JanaBobulis/snap-scroll/tree/main/src https://https-github-com-jana-bobulis-snap-scroll-bl9t.vercel.app/ Alternatively I could paste part of ScrollTrigger code here?
  6. Hello, Would anyone have an idea how to control GLB model rotation on scroll? I'm trying to get the model to return to it's original position on scroll if and when it's been rotated. I've enabled rotation for screen 2 and 3 and if user rotates the model I'd like it to go back to original position that was set in timeline. It seems to be working fine when scrolling down, but when scrolling up it remembers the position it was manually rotated to rather than what's set in the timeline. I've tried using toggleActions for each timeline, but it was breaking everything even more. Any help would be appreciated! Here's the link to CodeSandbox .
×
×
  • Create New...