Timeline Animation API

Ask the community
,
1

Hello everyone!

First of all, sorry if my question is too silly, I know nothing about coding, just starting to explore this whole “Velo world” :sweat_smile:

Here we go:

While using the timeline animation API, I realized that the “animation sequence” only works properly If all elements are placed on the same section…

How could I procede when elements to be animated are on different sections?

For example, If I use:

import {timeline} from 'wix-animations'

$w.onReady(function () {

timeline({repeat: -1, yoyo: true})
  .add($w('#itemSectionA'), {y: -30, duration: 1500, easing: 'easeInOutQuad'},)
  .add($w('#otherItemSectionA'), {scale:0.7, duration: 1500, easing: 'easeInOutQuad'}, 0)
  
  .play()
  
});

Ok, everything will work perfectly! But, If It is:

import {timeline} from 'wix-animations'

$w.onReady(function () {

timeline({repeat: -1, yoyo: true})
  .add($w('#itemSectionA'), {y: -30, duration: 1500, easing: 'easeInOutQuad'},)
  .add($w('#itemSectionB'), {scale:0.7, duration: 1500, easing: 'easeInOutQuad'}, 0)
  
  .play()
  
});

That won't...

If the solution is something simple (I bet It is ), would anybody give me some help?

Thank you very much!