Jump to content
Search Community

federico.pian

Members
  • Posts

    5
  • Joined

  • Last visited

Posts posted by federico.pian

  1. 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!

  2. 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!

  3. 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!

  4. 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()
         }
    })
  5. 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!

×
×
  • Create New...