Jump to content
Search Community

How to separate a different element in keyframes but animate with their own specific animation.

Yusuke2223 test
Moderator Tag

Recommended Posts

So I can't show a codepen now but I'll give a an basic example of it.

so let say I have a two items that I want to animate at the same time but they must have a different animations by using a keyframes..Let say for example
 

gsap.to([elem1,elem2],{
	keyframes:[{
     #for elem1: {rotateX:100},
     #for elem2 : {rotateY:100},
    },{
     #for elem1: {rotateZ:100},
     #for elem2 : {rotateX:100},
    }],
    duration:2,
    ease:"power2.out",
})

some thing like this.. I wanted to both animate them but they must be separated with their own specific animation. If any helps or just a suggestion where it close might be this I would solve it. Thanks.

Link to comment
Share on other sites

While there are technically ways to accomplish that, I honestly think it'd be simpler and cleaner to just create two different tweens: 

gsap.to(elem1,{
    keyframes:[...],
    duration:2,
    ease:"power2",
})
gsap.to(elem2,{
    keyframes:[...],
    duration:2,
    ease:"power2",
})

Those will run at the same time. If you want to combine them into a timeline so you can control it as a whole, that's simple too: 

let tl = gsap.timeline();
tl.to(elem1,{
    keyframes:[...],
    duration:2,
    ease:"power2",
})
tl.to(elem2,{
    keyframes:[...],
    duration:2,
    ease:"power2",
}, 0)

If you're not familiar with the position parameter which allows you to control exactly where your animations are positioned in a timeline, definitely check this out: 

Happy tweening!

  • Like 1
  • Thanks 1
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.
×
×
  • Create New...