Cassie

We're happy to help but no one has described the problem or given us a demo yet! If you need help please provide a demo.

Hey there, I've looked this over for a while now and I've got to say I'm pretty baffled. Could you maybe explain your goal a little more clearly? I think there's likely a different solution here and we may be better off focusing on that rather than trying to fix or understand what's happening here.

Hi there, we don't have the time or resources to build out solutions based on step by step requirements lists I'm afraid. Rodrigo mentioned the issue and potential solutions here Why don't you take a look at a solution again with this in mind. If you get stuck pop back with what you've tried and an explanation of why it didn't work or what you're struggling with. One solution could be to build out a timeline that does this all - then once that timeline is doing what you want, hook it up to scroll.

Not exactly SVGOrigin - use the SVG as the reference box for the transform. (spin around a point on the SVG canvas) transformOrigin - use the element itself as the reference box for the transform. (spin around a point on the element) And not quite You had two different transformOrigins, so smoothOrigin was moving the transform to the new origin position. This is the just the purpose of smoothOrigin, Nothing was being ignored or miscalculated. This might help - Glad you got it sorted! Seems odd that you can't use from, but if it works it works!

(except when it isn't 🙃 - that's what the article I linked to covered. z-index is a lot fiddlier than 'set a higher number') https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context Looks like it wasn't related to z-index though. Thanks for the demo!

Hey! I see you're london based - paging @joe_midi in case you have advice or need for freelancers 👀

Just echoing what Jack said and pointing you towards the issue - you're referencing a few club plugins directly from codepen. Those links won't work. A little FYI too - It's not great practice to use assets or files that other people are hosting, at best they may take those files down, at worst you may get CORS errors or even incur costs on someone if your site visitors hit their server too much. I once used a codepen hosted GSAP file for a banner ad back in the day, that was a disaster - so don't worry we've all been there 🫠

Not at all, it's good to know the stumbling points - I'll make a lil note in the docs!

Also hi @ErwinHeiser! Lovely to see workshop people popping in to the forums 💜 FYI, pathLength="1" is only needed if you're animating with CSS. (from the workshop docs) It's a bit of a hack to get around the complicated lengths you have to deal with without GSAP helping you out!

Heya! So smoothOrigin shouldn't be needed in your case at all. Smooth Origin is only for when you're animating between positions that have separate centers of transformation (transform origins) It basically moves the origin point to wherever the transformed element has moved to, so that there aren't jumps. What you've likely got confused about is that the set call is instant, you can't see that transformation happen, so you can't see that the center of origin is different in that set call than in your tween. What's actually happening here is this... You're scaling down the arrow head to the top left corner of it's bounding box, then scaling it up from the bottom left. With smoothOrigin this 'bottom left' position is moved to align with the new position of the arrowhead, so when it scales up, it's in a different place, here's a demo. https://codepen.io/GreenSock/pen/bGmPJoE?editors=0010 This is just an added layer of confusion here because you don't need this behaviour at all, there's no need for you to be animating between different origin points. It sounds like you're just trying to scale the arrow up in the right place right? --- So let's look at transforms. An origin point is basically the center of rotation or transform. Spinning or rotation is easier to visualise, so let's talk about spinning for now. You can think of it like if you were to put a pin in a post it note and spin the paper around, the paper would spin around the place where you've put the pin. The origin. The difference between transformOrigin and SVGOrigin is to do with which bounding box is used for the origin point. You can choose to spin around a point on the element itself, or somewhere on the SVG canvas. Here - You can see one is spinning around it's own top left corner, and the other is spinning around the top left corner of the SVG. you can add overflow visible on the SVG to see, I just kept it hidden for now as it's a little tidier https://codepen.io/GreenSock/pen/YzJoMbK For your example, all you need to do is animate using the correct center or transformation, so something like this? .from(`.ray__arrow--right`, { scale: 0, transformOrigin: 'bottom center', ease: "none" }) @Carl recently did a video on transformOrigin so that might be a good one to check out if you're still a bit baffled! addendum - in terms of SVG vs HTML, the main thing is that HTML dom elements spin around their own center, whereas SVG elements, by default, spin around the top left corner of the SVG canvas. With GSAP the default is the top left corner of the element itself. Hope this helps!

One thing mine doesn't do is flick the other way when you spin the wheel the opposite direction. The velocity value is negative or positive based on direction, so that might be a start. You could set up a reversed ticker if it's spinning the other way. Something along those lines! Taking all my willpower not to get distracted with this fun thing and carry on bug hunting 😂 Drop by when you've finished it, always like seeing where your demos end up!

Oooh fun one. you could make a tween for the ticker and then animate the progress? I've got to crack on with some other stuff, but maybe something like this could be a starting point? https://codepen.io/GreenSock/pen/eYPwZZb?editors=1011

If you have questions feel free to ask! 💚

Hey there, fun project you have here. ☺️ Here's a helper function and a demo of it in use - you'll need to load the scrollTo plugin https://codepen.io/GreenSock/pen/zYmQaVq?editors=0011 Hope this helps!

Heya! Maybe you need to wait for your custom font to load? Give this a pop - document.fonts.ready.then(function () { // do the thingsss });