Leaderboard

Here's your logo with stroke changed to #000 and fill changed to none: https://codepen.io/geedix/pen/eYbjvqE

Hi Ferrari, DrawSVG is for animating SVG strokes, but your artwork uses only fills, not strokes. To get a similar reveal effect with this art, you could use masks instead . Or, you could recreate your art using strokes instead of fills in order to use DrawSVG.

Hi @ysk welcome to the forum! You've got that working right!? And I think now you just want it to pin for as long as there is content? I've added a endTrigger: property to be your .Calendar element and then set the end: to be the bottom of that element. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/zYyLqaM?editors=1010

Yes that was it. Thank you so much

Best solution, thank you very much!

Thank you for the help and even more thanks for a very well-written explanation as well.

Hi, I think is better to use ScrollTrigger to get the new elements instead of using the intersection observer: https://codepen.io/GreenSock/pen/YzOzjbL The idea is basically to attach a ScrollTrigger instance to the body tag and then when you're close to the end of the document bring in the new elements in order to add them to the DOM. There might not be a need for the ScrollTrigger Batch approach in your case or maybe there is, you'd be the judge of that. Hopefully this helps. Happy Tweening!

Wow, yeah, I apparently was way over-engineering this. This looks way cleaner and more efficient. I'll give this a try. Thank you for your help!

Hi, I think you are over-engineering this waaay too much IMHO, which ultimately is causing the issue you're currently having. Here is a simpler approach using a single timeline: https://codepen.io/GreenSock/pen/oNJMgYp The CSS is not the same, but the idea is to give you an alternative that doesn't cause the same behaviour your example does. Hopefully this helps. Happy Tweening!

Hi, I don't have a lot of experience with THREE so I can't do a lot to replicate your issue. Most likely this seems related to the fact that you're passing an object to GSAP in a way it can't be handled. You need to target the x property of the scale object. One option I can think of is to create an array of objects that you can tween and use the onUpdate method to apply the changes to each cube element, but that would imply to loop through all the cubes in the callback in order to apply the scale values to each cube: const scales = gltf.scene.children.map(cube => { cube.castShadow = true; cube.receiveShadow = true; cube.scale.set(0.2, 0.2, 0.2); return { x: 0.2 }; }); Then you can run GSAP with advanced staggers on that array: gsap.to( scales, { duration: 2, x: 1, stagger: { amount: 0.1, grid: "auto", from: "center" }, onUpdate: updateScales, }); Sorry I can't be of more assistance, but this is not really a GSAP issue but a limitation of sorts in the way THREE (and most of the WebGL libraries I know for that matter) works when it comes to it's display objects/geometries. Hopefully this helps. Happy Tweening!

Hi @AllenIVe, I forked Blake's codepen, is just about some CSS: https://codepen.io/GreenSock/pen/RwEJzVV Hopefully this helps. Happy Tweening!