federico.pian

Hi @mvaneijgen, thanks for your answer. So going back to my first message where my first need was to tween a group of meshes, the easy solution could be to create another group (for ex. groupWrap) and add my group of meshes to the groupWrap. In this way I can tween the position and rotation of the inner group on mouse move, and animate the groupWrap with ScrollTrigger, sounds good? Thanks!

Hi @GSAP Helper this is a very basic example of the issue. https://codepen.io/fedeweb/pen/GRPQeYa As you can see there is a blue box animated with ScrollTrigger and there is also a mousemove listener which animate the box. If I scroll and then I move the mouse the box go back to the initial position, I need to sync the two actions, so the box has to stay in the right position during the scroll and at the same time I can move the mouse. Thanks for your help!

Hi, I a group of mesh and I'm animating some attributes on scroll, like scale, rotation, position etc. with a timeline and ScrollTrigger, and it works fine. tlHero.to( canvas.group.rotation, { y: `-=${Math.PI * 0.26}`, x: `+=${Math.PI * 0.26}`, }, 0); tlHero.to( canvas.group.position, { x: "-=1", }, 0 ); The starting rotation values of the group of mesh are: canvas.group.position.x = 1.43; canvas.group.position.y = 0.85; canvas.group.rotation.x = Math.PI * -0.14; canvas.group.rotation.y = Math.PI * -0.34; Now I want to add also a mouse move animation where I animate the rotation and position of the group, also this one works: onMouseMove() { this.cursor.x = event.clientX / window.innerWidth - 0.5; this.cursor.y = event.clientY / window.innerHeight - 0.5; gsap.to(canvas.group.position, { x: 1.43 + this.cursor.x * 0.02, y: 0.85 + this.cursor.y * 0.02, duration: 1, }); gsap.to(canvas.group.rotation, { x: Math.PI * -0.14 - this.cursor.y * 0.04, y: Math.PI * -0.34 - this.cursor.x * 0.04, duration: 1, }); } Now the question is: how can I combine the mouse movement and ScrollTrigger animation? This is an example of what I want to achieve: https://crosswire.unseen.co/ As you can see there is a mouse movement effect where some objects of the scene are moving and the scroll started always from the right position. Thanks in advance for your help!

Hi @Rodrigo, thanks for your answer. I came up with this solution: I removed the revert function on the unMounted hook and I kill all the scrollTriggers in the transitionConfig.js file when the page is leaving. Is it a good solution? Thanks again for your help! const tlLeave = gsap.timeline({ paused: true, onComplete: () => { ScrollTrigger.killAll() done() } })

Hi I'm working on page transition in Nuxt 3 with gsap, following this Stackblitz: https://stackblitz.com/edit/nuxt-starter-bthjlg?file=README.md Is it possible to wait the page leaves and then revert the context? Otherwise you see weird behavior, for example when you are on the Layer section page, you scroll to a pinned section and then you navigate to another page it should stay to that section and not jumping to the top. Thanks in advance for your help!