Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
MrMateo7

¿How can I get actual values through the time?

Go to solution Solved by OSUblake,

Recommended Posts

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?

Link to comment
Share on other sites

Like this... 

const obj = {
  x: 0
};

gsap.to(obj, {
  x: 1,
  duration: 1.65,
  onUpdate() {
    console.log(obj.x);
  }
});

 

Or this...

const obj = {
  x: 0
};

gsap.to(obj, {
  x: 1,
  duration: 1.65,
  onUpdate() {
    console.log(this.targets()[0].x);
  }
});

 

Note that's assuming the obj is not an element.

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • Solution

Elements are little different because the value is part of the style object. GSAP has a helper to get those style values for you.

https://greensock.com/docs/v3/GSAP/gsap.getProperty()

 

gsap.to("#Poker_presentaciones", {
  duration: 5,
  x: 500,
  onUpdate() {
    console.log(gsap.getProperty(this.targets()[0], "x"));
  }
});

 

Using the getter function.

const element = document.querySelector("#Poker_presentaciones");
const getter = gsap.getProperty(element);

gsap.to(element, {
  duration: 5,
  x: 500,
  onUpdate() {
    console.log(getter("x"));
  }
});

 

If you're animating an array of values, this should work for you.

gsap.to(n3i, {
  endArray: n3f,
  duration: 1.5,
  ease: "sine.inOut",
  onUpdate() {
    camera.position.x = n3i[3];
    camera.position.y = n3i[4];
    camera.position.z = n3i[5];
    camera.lookAt(n3i[0], n3i[1], n3i[2]);
    camera.far = n3i[6];
    camera.updateProjectionMatrix();
  }
});

 

 

  • Like 1
Link to comment
Share on other sites

13 minutes ago, OSUblake said:

Elements are little different because the value is part of the style object. GSAP has a helper to get those style values for you.

 

But you usually don't need to access those values because the CSSPlugin automatically applies them for you.

 

tween.js

const box = document.querySelector("#box");
const coords = {x: 0, y: 0};
const tween = new TWEEN.Tween(coords) 
	.to({x: 300, y: 200}, 1000) 
	.easing(TWEEN.Easing.Sinusoidal.Out)
	.onUpdate(() => {
		box.style.setProperty('transform', `translate(${coords.x}px, ${coords.y}px)`)
	})
	.start();

gsap

gsap.to("#box", {
  x: 300,
  y: 200,
  duration: 1,
  ease: "sine"
});

 

  • Like 2
Link to comment
Share on other sites

var photoArr = gsap.utils.toArray('#section2 .photo'); 

gsap.to(photoArr, { x:`${(i-(photoArr.length-1))*100}%`})

I know it's not the same, but I was wondering how do I get the interaction value when I use an array in a Tween?

I tried with i, but it always returns the value length. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×