Wrap elements in a section with ease on each step consisting of y: element.height

[Moonfleet]

Hi. This is my first post here. 
I got stuck working on an animation with brief like this:

Quote

Crete a slider of boxes/images that moves up from the bottom of the section of y value of a height of one box, stops for a second and then move up until the first box wraps from the bottom the moment it's disappear on the top of the section.
The box that is on the middle of the section should move to the right edge and scale up to 1.4.

Actually I have just problem with the wrapping. If I move box in y axis value of boxHeight and do repeat refresh it overrides modifiers:

const sectionHeight = gsap.getProperty('section', 'height');
const boxSize = sectionHeight/elements.length;
    
gsap.set('.box', {y: sectionHeight, x: 200, height: boxSize, width: boxSize});

gsap.to('.box', {
          repeatDelay: 1,
          y: '-=' + (boxSize),
          duration: 1,
          repeat: -1,
          ease: "none",
          repeatRefresh: true,
          modifiers: {
            x: gsap.utils.unitize(y => parseFloat(y) + (sectionHeight - boxSize))
          }

Can I do this with modifiers alone so that I got move theme above section and got stop/delay between each step of 'y: boxSize'.

 

https://codepen.io/olivetum-the-sans/details/zYgNyjX

See the Pen zYgNyjX by olivetum-the-sans (@olivetum-the-sans) on CodePen.

[Rodrigo]

Hi @Moonfleet and welcome to the GSAP forums!

 

I'm not 100% sure about what you're trying to achieve here, maybe an infinite vertical loop? If so check or Vertical Loop helper function 

 

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop

 

Also is worth mentioning that in your modifiers plugin you're modifying the X valu according to your config, maybe you should try using y instead.

 

Finally thanks for being a GSAP Club member and supporting GSAP! 💚 

 

Hopefully this helps 

Happy Tweening 

[Moonfleet]

Hi @Rodrigoreply. Thank you for your reply. I probably have described the desired effect wrongly, but I found a simpler solution for my purpose: I have put each of the boxes in their separate four-step timeline and delayed subsequent timelines respectively like that:

See the Pen QWepZPP by olivetum-the-sans (@olivetum-the-sans) on CodePen.

[Rodrigo]

Hi,

 

Yeah creating endless loops is not the simplest thing to achieve and there are different approaches based on the effect you are trying to achieve.

 

I couldn't resist to create a version of this using our helper function 😄

 

See the Pen GRVWLdZ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!