sandra Ballé Posted August 26, 2020 Share Posted August 26, 2020 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 Link to comment Share on other sites More sharing options...
akapowl Posted August 26, 2020 Share Posted August 26, 2020 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 3 Link to comment Share on other sites More sharing options...
sandra Ballé Posted August 26, 2020 Author Share Posted August 26, 2020 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 ! 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 There are a couple of primary issues here: 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. 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. 4 Link to comment Share on other sites More sharing options...
sandra Ballé Posted August 26, 2020 Author Share Posted August 26, 2020 wonderfull, thank you Zach, for the primary issues fixing and the side notes ! It didn't even cross my mind to use different timelines :) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now