ScrollTrigger.batch()

[sandra Ballé]

Help! aux adeptes de la chaussettes verte !

I struggle with a menu, it's driving me crazy : I am trying to get each menu items to appear neatly. Each menu item would be drawn with their text, one after the other. It's a lovely curiosity cabinet articles publication portal, I cleaned the code pen best as I could, but left some steps to the drawing and the curious items.

thanks in advance for any help !

-Sandra

 

See the Pen dyMvwmW by sandraballe (@sandraballe) on CodePen

[akapowl]

Hey @sandra Ballé

 

This probably is not a 100% relevant solution for you, since you are using batch (and might need to have the batch-functionality) and I avoided that in my pen,

but I wanted to share it anyways, since I was not quite sure, what exactly it was, you wanted to achieve, and maybe this helps others better understand.

 

Is this the sort of effect, you're after?

 

See the Pen 43eef71ce99329887b6be5147b2b61ca by akapowl (@akapowl) on CodePen

 

 

 

Note, that in your HTML you still have a couple of issues that prevent things from working as intended:

 

There is a 

filter="url(#chalk)"

applied to some elements, which causes them not to appear.

 

And towards the end you have a typo thing going on:

<image  class="objetNonPoster" xlink:hrefhttp://altarivaconsultants.com/curiosites/img/article_06.png" width="400px" height="400px" x="30" y="-40" />

is missing a  --> " <--- after the 'xlink:'

 

 

Let me know, if this goes into the right direction.

Cheers,

Paul

 

 

[sandra Ballé]

hi Paul,

thank you, yes, I went a bit fast taking cleaning my pages for the code pen : hence the mistakes you caught ! However, I think the effect I'm looking for actually with ScrollTrigger.batch. I want each object / a tag, to fully form before the next one appears.

 

thanks for you help !

[ZachSaucier]

There are a couple of primary issues here:

1. You're adding tweens to the same timeline every time. That's no good because you want to use the batch functionality. Create standalone timelines instead.
2. Your selectors for your tweens are not scoped to the particular instance that you have. Since they're generic, they're selecting all of the elements that match the selector on the page, thus the animation is already complete when ones after the first are ran.

Fix those issues and it works!

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

 

Side notes:

• I'd avoid nested SVGs if you can help it - they're a bit confusing.
• Using force3D on SVG elements doesn't make much sense since SVG doesn't support 3d - you can remove that.

[sandra Ballé]

wonderfull, thank you Zach, for the primary issues fixing and the side notes !

It didn't even cross my mind to use different timelines :)