Hi, have a nice day, i try to find a way to play animation with scroll using gsap like let scrollingTL = gsap.timeline({ scrollTrigger: { trigger: canvas, start: 'top top', end: '+=500%', pin: true, scrub:…

Does the following topic solve your issue? The questions seem to be quite similar. [image] Three.js + Gsap ScrollTrigger Questions hi everyone, about Three.js + Gsap ScrollTrigger. I want to make that when the mouse scrolls down, the model can rotate. When I use **let t…

[image] Mugen87: Does the following topic solve your issue? The questions seem to be quite similar. Oh i am sorry if i explain wrong , but my english is bad , i mean play mesh animation based on scroll , this animation mixer = new THREE.AnimationMixer(gltf.scene) const action = mix…

Do you mean you want to trigger the animation at a certain scroll position?

[image] Mugen87: Do you mean you want to trigger the animation at a certain scroll position? Yes, something like this .

Try it like so: https://jsfiddle.net/2q7z63ot/ The idea is to add an onEnter() callback function which is executed when the scroll position moves forward past the start. Use it to start your animation. If you want to execute this callback only once, set the respective configuration property to true.…

[image] Mugen87: The idea is to add an onEnter() callback function which is executed when the scroll position moves forward past the start. Use it to start your animation. If you want to execute this callback only once, set the respective configuration property to true . Yes but when i set th…

@lolia try like this…? let oldValue = 0; window.addEventListener('scroll' , function(e){ var newValue = window.pageYOffset; if(oldValue - newValue < 0){ mixer.update( (newValue - oldValue) / 250 ); } else if(oldValue - newValue > 0){ mixer.update( (newValue - oldValue ) / 250 ) ; } oldV…

[image] Lawrence3DPK: @lolia try like this…? Yes i try this but i want to use gsap for more control

This is not working on mobile - the timing is completely off as is the animation.

Play animation with scroll

Questions

Mugen87 June 8, 2021, 8:40am 2

Does the following topic solve your issue? The questions seem to be quite similar.

Topic		Replies	Views
Play imported animation based on scroll Resources gsap	0	503	July 8, 2021
Three.js + Gsap ScrollTrigger Questions animation , scrolling , gsap	2	8740	November 4, 2020
How to control GLTF animation while scrolling the page using Three.js + Gsap Questions threejs , gsap , animation-mixer	2	3494	May 30, 2023
Gsap + animationMixer Questions animation	6	1632	November 20, 2022
GSAP Scroll as trigger + Three.js timeline Showcase	0	1059	January 21, 2022

Play animation with scroll

Related topics