federico.pian
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by federico.pian
-
-
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!
-
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!
Mouse movement combined with ScrollTrigger
in GSAP
Posted
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!