[ScrollTrigger snap issue]

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?

[¿Can gsap an entire object or Vector3?]

Sure, thanks!

And if I need to get separated values, for example...

...
onUpdate() {
  mesh.rotation.x = // First value?
  camera.position.y = // Second value?
  ...
}

 

[¿Can gsap an entire object or Vector3?]

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

 

[¿Can gsap an entire object or Vector3?]

4 minutes ago, OSUblake said:

a would be an object on an object.

 

To tween a vector, just do this.

const v = new THREE.Vector3(0,0,0);

gsap.to(v, {
  x: 20,
  y: 50,
  z: 40,
  onUpdate() {
  	console.log(v);
  }
})

 

 

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

 

[¿Can gsap an entire object or Vector3?]

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!

["delay" to scrollTrigger]

3 hours ago, elegantseagulls said:

For this, you can just add a position parameter to your tween:

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?

["delay" to scrollTrigger]

1 minute ago, elegantseagulls said:

You should be able to just add a delay: 0.25 to your .timeline object.

That don't work.

["delay" to scrollTrigger]

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/

 

 

[¿How can I get actual values through the time?]

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!

[¿How can I get actual values through the time?]

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?