How can I simplify this gsap code

[HomTom]

What would be a shorter and better way to achieve the same animation?

For example would it be possible to use yoyo effect for it?

 

const myAnimation = gsap.timeline({ repeat: -1 });

myAnimation
.fromTo('.rectangle', {
  duration: 3,
  scale: 0,
  opacity: 0,
  rotate: -160
},
{
  duration: 3,
  scale: 1,
  opacity: 1,
  rotate: 0
})
.to('.rectangle', {
  duration: 3,
  scale: 2,
  opacity: 1,
  rotate: 160
}, '<=1')
.to('.rectangle', {
  duration: 3,
  scale: 0,
  opacity: 0,
  rotate: -160
})

 

 

 

See the Pen VwvjpGa?editors=1000 by itsthomas (@itsthomas) on CodePen

[ZachSaucier]

Hey HomTom. It's not very clear what you want the animation to do. Are you wanting something like this?

See the Pen WNQxEzM?editors=0010 by GreenSock (@GreenSock) on CodePen

[HomTom]

WOW! Thanks. Yes, this is exactly what I had in mind.

Would it be possible to explain your way of achieving it?

1. You first set the scale to 2, why?

2. Why 

rotate: -360

Thanks

 

[ZachSaucier]

35 minutes ago, HomTom said:

1. You first set the scale to 2, why?

2. Why 

rotate: -360

I thought that's what you wanted. They're just values.

[Shrug ¯\_(ツ)_/¯]

2 hours ago, HomTom said:

1. You first set the scale to 2, why?

Because it uses a ‘from’ tween, so you set the end result and then tween it from 0. You could instead use a ‘to’ tween and adjust things as needed.

 

7 hours ago, HomTom said:

For example would it be possible to use yoyo effect for it?

Sure you could 'yoyo' using only one 'fromTo'.

 

const myAnimation = gsap.timeline({ repeat: -1, yoyo:true });
myAnimation
.fromTo('.rectangle', {
  duration: 3,
  scale: 0,
  opacity: 0,
  rotate: -160
},
{
  duration: 3,
  scale: 1,
  opacity: 1,
  rotate: 0
});