ChaBuku

Hello! I am attempting to animate the height of an opening bootstrap dropdown. I can get the box to animate as expected, but there's some strange behavior with some of the items inside the box as it opens. Why are the items inside the box outside until it fully animates? Can someone explain to me what is happening?

Thanks folks! I realized after taking a closer look that I was finding the origin wrong in Illustrator. I'm super glad to know I was using dated syntax and updated everything and it's all working smoothly.

@ZachSaucier: Does svgOrigin change locations as the animations continue and the placement changes? Does svgOrigin use the svg's placement inside the entire document? Or relative to its own top left (in this case top-left #lenny-worried, not #eye1)? I updated the demo using svgOrigin for the left pupil, which again sits at x:240 and y:381, but when it rotates, it rotates completely off his face. What is going wrong with my origin? Why won't the pupil rotate around 240, 381?

@ZachSaucier thanks for that recommendation, I had built my my demo from a tutorial, but was still having issues on my local development using GSAP 3. I noticed the example in this document: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin under "svgOrigin" uses an old version of GSAP Can you tell me how the svgOrigin works? If the id=#eye1 inside of my <svg id="lenny-worried"> is centered at x:240 and y:381 (relative to the entire svg #lenny-worried), can I use that point relative to the SVG? Or do I need to use an origin that is relative to the eye itself? If I use one relative to the eye itself, is it relative to where it is *right now* or is it relative to where it started (240, 381 inside the svg, or at the very beginning of the animation relative to itself 0, 0). I have updated my above CodePen with GSAP 3 and updated syntax, and have it working, but it doesn't make sense why svgOrigin isn't working. I would like to set the center of the eye for the pupil to rotate around, which is 0, 0 relative to itself at the beginning of all animations. https://codepen.io/adbakke/pen/YzwrEYN

Hey, I'm trying to animate my friend Lenny, but it seems that I cannot get his pupil to rotate around the svgOrigin: svgOrigin: "240px 381px" It can move his pupil to the left and right from the origin just fine, but when I try to rotate, it just doesn't work. Click on the Purple button to rotate his left pupil (eventually trying to get both rotating, but one at a time!) See line 34 of the JS on the Codepen where I am trying to rotate.