TYPeee

Camera Movement in Three.js with GSAP

profile image of Wonje Jang
Wonje Jangthreejs • Sun Jul 07 2024 13:22

Using GSAP Directly

Using GSAP directly involves calling animation methods like gsap.to, gsap.from, gsap.fromTo, etc... to animate properties of objects. This approach is straightforward and suitable for simple animations.

When to Use?

  • When you have simple, independent animations.
  • When you need to quickly animate a single property or object.
  • When the sequence or timing of animations is not important.

 

1. gsap.to(target, vars)

Animating the target's properties to specified values(vars) over time

javascript
1// Animate a cube's rotation to 360 degrees around the x-axis over 2 seconds
2gsap.to(cube.rotation, { duration: 2, x: Math.PI * 2 });

 

2. gsap.from(target, vars)

Animating the target's properties from the specified values to their current values

javascript
1// Animate a cube's opacity from 0 to 1 over 2 seconds
2gsap.from(cube.material, { duration: 2, opacity: 0 });

 

3. gsap.fromTo(target, fromVars, toVars)

Animating the target's properties from 'fromVars' to 'toVars'

javascript
1// Animate a cube's scale from 0.5 to 2 over 2 seconds
2gsap.fromTo(cube.scale, { x: 0.5, y: 0.5, z: 0.5 }, { duration: 2, x: 2, y: 2, z: 2 });

 

Using GSAP Timelines

Using gsap.timeline is a powerful tool that allows you to create sequences of animations with precise control over their timing and synchronization. A timeline can contain multiple animations and can be controlled as a whole.

When to Use?

  • When you need to create complex sequences of animations.
  • When you want precise control over the timing and synchronization of multiple animations.
  • When you need to adjust or manipulate the entire sequence of animations easily.
  • When you need to pause, reverse, or control the animations as a whole.

 

1. gsap.timeline()

gsap.timeline() creates a timeline instance that can contain multiple animations and provides methods for controlling the entire sequence.

javascript
1const timeline = gsap.timeline();
2
3// Add animations to the timeline
4timeline
5  .to(cube.position, { duration: 2, x: 10 }) // move to x = 10
6  .to(cube.rotation, { duration: 2, y: Math.PI * 2 }) // rotate 360deg around the y-axis
7  .to(cube.scale, { duration: 2, x: 2, y: 2, z: 2 }) // scale to twice its size
8  .to(cube.material, { duration: 2, opacity: 0.5 }); // fade opacity to 0.5

 

Common Properties of Vars

  • duration(Number): The duration of the animation in seconds.
  • delay(Number): The amount of time in seconds to wait before starting the animation.
  • ease(String or Function): The easing function to control the rate of change during the animation.
  • repeat(Number): The number of times the animation should repeat. Use -1 for infinite repeats.
  • yoyo(Boolean): if true, the animation will reverse direction on each repeat.
  • onComplete(Function): A callback function that runs when the animation completes.
  • onStart(Function): A callback function that runs when the animation starts.
  • onUpdate(Function): A callback function that runs when the animation updates.
  • onRepeat(Function): A callback function that runs every time the animation repeats.

 

Related Posts