PointC

I'm not sure where you're seeing these phrases and in what context they were used, but I'd say: wrapping: my first thought is wrapping child divs, elements sprites, etc. in a parent. snapping: makes me think of snapping in Draggable clamping: probably clamping a number? https://css-tricks.com/snippets/sass/clamping-number/ I'd say just start Googling when you find something in an article or blog post. If you have specific GSAP questions or problems, we're happy to help. Happy tweening.

Is this what you need? https://codepen.io/PointC/pen/QRwmKw

No worries. I use Draggable quite a bit, but rarely use scrollTop so it took me a few minutes of tinkering too. I'm sure Jack will stop by and drop some knowledge when he gets a chance. Happy tweening.

Hi @ZachSaucier, I'm not 100% certain of the cause here, but setting a height on the .scroll-container seems to make everything work correctly. https://codepen.io/PointC/pen/BeyJGd @GreenSock will probably stop by with more details. Happy tweening.

I think this article can help with your project: https://css-tricks.com/writing-smarter-animation-code/ Happy tweening.

If you don't want them all to move at the same time, you can do this: Draggable.create("use", {... Does that help? Happy tweening.

If you do want to use a linecap and start from the middle, we have a thread about that same topic here: Happy tweening.

This looks like a fork of Sahil's stacking demo: https://codepen.io/Sahil89/pen/pxmrpR I haven't watched it, but he has a companion tutorial video you could watch. Maybe it will help. Happy tweening.

Just some other notes in addition to the things Shaun mentioned: 1. You have a typo // switch this funtion runAnimation() // to this function runAnimation() 2. It looks like you have two durations in your constructor var tween = TweenLite.from(myCircle, 5, 0.5, {left:"1200px"}); // I assume you meant to do this var tween = TweenLite.from(myCircle, 5, {left:"1200px"}); 3. Left isn't a property of an SVG circle — you'll want to use x like @Shaun Gorneau did in his demo or the cx attribute. var tween = TweenLite.from(myCircle, 5, {x:1200}); Happy tweening.

Hi @Chris Prieto, Welcome to the forum and thanks for joining Club GreenSock. I'm troubleshooting a bit blind here, but I see a couple things. 1. The <li> is $(this) so I think you meant to do this // switch this servicePSplit = $(this).find('.services-wrap li p') // to this servicePSplit = $(this).find('p') The other thing I don't know is how many <p> elements (or other elements) are part of the <li> that would be the children. I'm guessing the <p> is the only one? If so, tweening children[2], [3] etc won't work since element.children[0] is the only one that exists. This is just a guess though since I can't see your DOM. If you could make a demo and describe the desired behavior, we could offer more detailed assistance. More info: Hopefully that helps. Happy tweening and welcome aboard.

I think you should be able to use svgOrigin and this will work just fine. svgOrigin: "367.52 367.52" https://codepen.io/PointC/pen/VOZrro Happy tweening.

Happy to help. Let us know if you have additional GSAP questions. Have fun.

Hi @astanar, Welcome to the forum and thanks for joining Club GreenSock. You can't tween visibility as it's a binary setting. (visible/hidden) There's nothing for GSAP to calculate and tween. Opacity can be animated between 0 and 1. I'd recommend the best of both worlds by using autoAlpha. That property is a combination of opacity and visibility. Once the opacity of autoAlpha tweens hits 0, the visibility property will be set to hidden. More info: https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha Hopefully that helps. Happy tweening.

ScrollMagic isn't a GreenSock product so we can't really help too much as this forum is dedicated to GSAP problems and questions. That being said, you'll need one more file to allow ScrollMagic to hijack the tweens. <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js"></script> I'm not sure what should be happening because you've commented out your controller and never added the scene to it. Have you taken a look at the ScrollMagic docs for horizontal scrolling? https://scrollmagic.io/examples/basic/going_horizontal.html If you have GSAP related questions or problems, we're happy to help. Happy tweening.

@greg K to which demo are you referring? One of those from Diaco I posted above? If so, I'm not sure if they work or not with the latest GSAP. I've never tried them with other versions or looked to see what has changed. If you want to fork one of them and post it, we can take peek.

Excellent. I'm glad to hear it's all working well for you now. Let us know if you have additional GSAP questions or problems and thanks for being a Club GreenSock member. Happy tweening. PS If you do want to use variable width strokes (which are actually filled paths), you can mask the lines and get a nice animation. This is a demo from another thread, but it show the basic technique. https://codepen.io/PointC/pen/JpPzvN

Happy to help. Let us know if you have any more GSAP questions or problems. Happy tweening.

I see you edited your response so problem one is solved. At least the plugin is working correctly now. Now you just need to fix up that artwork. Let us know if you have additional GSAP questions or problems. Happy tweening.

I guess you have two issues. One: is the DrawSVG plugin working? For that, I'd recommend just adding a simple SVG with one line and see if it will draw. You could test with something like this: <svg xmlns="http://www.w3.org/2000/svg" width="500" height="20" viewBox="0 0 500 20"> <line x1="0" y1="10" x2="500" y2="10" stroke-width="5" stroke="red"/> </svg> Two: artwork prep. It's not just the settings in the export. Your actual artwork looks like it's made up of filled paths. You want open paths with strokes. Take a look at this example of two paths. https://codepen.io/PointC/pen/YMoGNY Both paths look identical, but the top one is an open path with a stroke and you can see that the DrawSVG plugin animates it correctly. The bottom one seems like it's the same, but it's really a filled path. If you want to animate a filled path to look like a stroke, you'll need to use a mask. But it would probably be easier to go back to Adobe Illustrator and make the changes. Make sense? Please give those ideas a try and let us know what you find out. Happy tweening.

Hi @Arteau, Welcome to the forum. I see a whole bunch of filled paths in that SVG, but no strokes on anything. The DrawSVG plugin only animates strokes, not fills. Please try adding a stroke to some or all of the paths and I think you'll see it start working for you. You may have to change your artwork a bit too as adding a stroke will create an outline on the outside of each of the filled paths which is probably not the effect you're after here. Hopefully this helps a bit. Happy tweening and welcome aboard.

Is that a question or a statement? I'm guessing you want the dots to animate along with the slider? There would be several ways to do that. The easiest would be to make the dot animation a part of the timeline. Feel free to fork my demo and give that a try. Please post a new demo if you have any GSAP related questions or problems. Thanks.

Here's a good one by Blake that you can study. https://codepen.io/osublake/pen/vKdGAy Happy tweening.

No problem. I was happy to 'step in' and help. Ha. Let us know if you have any other GSAP problems or questions. Happy tweening.

As always, @Rodrigo is the answer man.

You'll only want 39 steps in this case. You start on step 1 so 39 additional steps puts you on step 40. tl.to(spriteSheet, 4.5, {left: '-4000%', ease:SteppedEase.config(39)}) https://codepen.io/PointC/pen/axrRrM Happy tweening.