A way to solve conflicting tweens

[mvaneijgen]

It can be really hard to tween the same property multiple times on the same element. Lets say you want to reveal an element on scroll base on the scale property, but then also want an hover effect, which also targets the same scale property, you then soon find out that these two tweens don't really play nice with each other. 

 

When you scroll just a bit and then hover, you’ll see weird jumps and when you then start scrolling again even more jumps. Don't even try to hover and scroll at the same time! this will be sure to give you a headache! 

 

See the Pen myEWWBe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

How can we solve these issues? We could create the tween only on hover, but this will create new tweens each time you hover and will solve the issue only one way, as soon as we scroll again, things will break again. We could remove the scroll tween as soon as we hover, but then we’ll be missing features. Not really nice solutions, but what if I told you it is even simpler than that!

 

Just split your tween over two elements! Wrap your element in another element and move one of the tweens to that element. This way, you split the logic over two elements, and you no longer have any conflicts

 

This is not the only way to solve conflicting tweens, you could also use different properties. If you, for instance, want to tween things on the y-axis, you could combine y and yPercent on the same element without any issues. Also, scroll and hover are not the only ways to create conflicting tweens. It could rear its head anytime, so it is good to be aware of when you see weird jumps happening in your animations to see if you are animating the same property on the same element and if adding another element could solve these issues!

 

Hope it helps and happy tweening!

See the Pen dPXvvqy?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.