[Mouse movement combined with ScrollTrigger]

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!

[Mouse movement combined with ScrollTrigger]

Hi @GSAP Helper this is a very basic example of the issue.

 

See the Pen GRPQeYa by fedeweb (@fedeweb) on CodePen

 

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!

[Mouse movement combined with ScrollTrigger]

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!

[GSAP and Nuxt 3 Page transition]

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()

     }

})

[GSAP and Nuxt 3 Page transition]

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!