MrMateo7

Hi! I'm having a an issue when scrollTrigger snaps. This is my code. presST = gsap.timeline({ scrollTrigger: { trigger: presElem, start: 'top top', end: '300% 90%', // markers: true, pin: true, pinSpacing: true, scrub: 1, toggleActions: "restart pause resume pause", snap: { snapTo: 1/7*6, duration: {min: 0.5, max: 1.25}, ease: 'power1.out' } }, defaults: { ease: 'power1.out', } }) When the progress is less than 0.5, it snaps to progress 0, to the start. How avoid that? how to make aaaalways snaps to the specified point?

Sure, thanks! And if I need to get separated values, for example... ... onUpdate() { mesh.rotation.x = // First value? camera.position.y = // Second value? ... }

Ok, thanks! And can pass objects like this, and if this possible how get the values? const startValues = [ 0, 10, 20 ] const endValues = [ 20, 50, 40 ] gsap.to(startValues, { endValues, onUpdate() { // How reach those values in both cases? }, duration: 6 })

The point is in many cases, I tween multiple vectors at the same time... I can't do that with gsap? I need to create one gsap for each vector? const vectors = { a: new Vector3(...), b: new Vector3().copy( vector.from.other.js ), c: new Vector3( 0, value.from.anotherVector, 10) }

Hi everyone! Working on a threejs project, so I need to animate an group of values or some Vector3. In tween I used to do but with gsap it dont work, what I'm doing wrong? There are two cases. 1. Is there any difference betwenn an array or an obj? // as Array const startValues = { a: 0, b: 10, c: 20 } // as Obj const startValues = [ 0, 10, 20 ] // as Array const endValues = { a: 20, b: 50, c: 40 } // as Obj const endValues = [ 20, 50, 40 ] gsap.to(startValues, { endValues, onUpdate() { // How reach those values in both cases? }, duration: 6 }) 2. const startValue = { a: new THREE.Vector3(0,0,0) } gsap.to(startValue, { a: new THREE.Vector3(1,10,5), onUpdate() { console.log( this.targets()[0].a ) // Logs me [Object object] }, duration: 6 }) Thanks for helping!

Thanks, this work for the beginnig, gives that 'delay'. Can you explain me a little better, what did you mean with 'position parameter' And to give that little delay at the end? any idea?

That don't work.

Hi! I'm working with Threejs, and with scrollTrigger to 'animate' certain meshes. So I want to scroll an certain amount at the beginning (for example 200px) as a delay to scrolltrigger effect, and also at the end, you scroll certain amount after the cointaner scrolls up, because since you start scrolling the can start to move. I want to add a delay to that movement BUT keeping the container pinned. gsap.registerPlugin(ScrollTrigger) let t = gsap.timeline({ scrollTrigger: { trigger: containerPoker, // The canvas start: '100px 100px', // trigger viewport end: '100% top', markers: true, pin: true, scrub: 0.5, toggleActions: "restart pause resume pause" } }) t.to(lRegular.rotation,{ y: Math.PI * 2, z: Math.PI / 4, }) There is a live example.https://poker-skus.larealidadaumentada.com.co/

This works, thanks! I'm doing an Threejs project, so I use a lot tween in the next way... Is possible to tween multiple values as an obj/array? I used to do this on tween, how to do this on gsap? const n3i = [ n3cameras[target].target.x, n3cameras[target].target.y, n3cameras[target].target.z, n3cameras[target].camera.x, n3cameras[target].camera.y, n3cameras[target].camera.z, camera.far ] const n3f = [ entrada.camera.target.x, entrada.camera.target.y, entrada.camera.target.z, entrada.camera.final.x, entrada.camera.final.y, entrada.camera.final.z, fars.n2 ] const n3Tween = new TWEEN.Tween(n3i) .to(n3f, 1500) .easing(TWEEN.Easing.Sinusoidal.InOut) .onUpdate((e) => { camera.position.x = e[3] camera.position.y = e[4] camera.position.z = e[5] camera.lookAt( e[0], e[1], e[2] ) camera.far = e[6] camera.updateProjectionMatrix() }) .start() Thanks for help!

Hi everyone! I was user of tween, there I can do something like this. Where e is the current value throung the time... so if I log in onUpdate the e value logs the exactly value in time. const n2bt = new TWEEN.Tween({x: 0}) .to({x:1}, 1650) .onUpdate((e) => { console.log(e.x) }) .start() } How can I do this with gsap?