Vivodionisio

Hi @PointC, @OSUblake , I’ve finally been able to come back to the stickman. I’ve been trying to implement your suggestions and have a couple of versions, one where I have swapped out ‘to’ tweens for ‘set’ and used the position parameter instead of delay, and this all works perfectly. And one where I've tried using a loop for identical tweens, but for some reason it’s causing a flicker midway through the animation. It happens a bit randomly, sometimes rarely and sometimes often which isn't very helpful for demo purposes. But I wondered if there might be an obvious reason for it, even if you don't happen to see it? Also I was wondering: if a ‘set’ tween has no duration or delay, as in the case of tweens for stickman 4 to 8 in the first implementation (with no loop), how is it these tweens don’t just happen simultaneously? Thanks in advance for any feedback. https://codepen.io/saulnewbury/pen/GRQMxwr

Hi @PointC You solved it. Thank you so much!

Hi, For some reason my onComplete callback is firing at the beginning of the animation. What I'm trying to achieve is that the cursor only blinks after typing has finished. Any feedback much appreciated. Thanks, Vivo.

Aha. Plain old event bubbling, of course. Not a quirk of gsap working with react as I imagined. Thank you so much!

Hi @Cassie, Thanks for the sandbox starter. And btw, love the animated logo... looking forward to checking out your tutorial on that. Okay, so this should be a working example now... https://codesandbox.io/s/sharp-wright-vutdo0?file=/src/styles.css

Hi! : ) I've created a minimal demo but my pen isn't working. I've tried to set it up as you have in one of your own examples using jsx, so I'm a but flummoxed on that. Can my github repo substitute? If so its https://github.com/Vivodionisio/item-animation-minimal This is what it would look like initially... I've been at this for quite a while, but alas, going nowhere! What I have is six box components laid out in a row. Each box contains two divs, a grey box div and a coloured modal div. Initially you can only see the grey box div, but when this gets clicked the modal comes into view, assuming the position and dimensions of the grey box (using boundingClientRect), but for larger height which extends from the bottom. Now the modal is visible it can be clicked in order for it to fully expand. Upon expansion a close button appears to reverse that expansion, which is the bit that isn't working. It needs to go back to the position from whence it came. I've tried a few different approaches, and I've read the best practices outlined in one of your Greensock articles (very helpful), but still can't crack it. Thanks in advance for any help/input!

Hi @OSUblake, thanks for taking a look. It'll be great to get this working optimally, so really glad for the feedback!

Hi @PointC, Setting immediate render to false has worked a treat. But I’m confused... in the docs (https://greensock.com/docs/v3/GSAP/Tween) it says the default for to() tweens is already false. Is this something that was changed recently, or have I missed something? I really appreciate your hints and the demo. I’ll definitely implement these. Thank you so much!

Hi @PointC, Thank's for you response! I've done some culling of the unnecessary stuff, including elements inside the SVG. A good sleep helped! I tried taking the bag away too, but it changed the symptoms so I've left it in. Also I have left the delay of 0.1 on the first tween of both the shadowMorph() and toRest() timelines, so currently the animation works properly. But if you take away these delay properties the symptom for each appear. I've been trying to work with position on the master, but didn't consider it for the child timelines for some reason, so I'll have a look at that and read through the timeline tip, and I'll check out the other links too. Thanks!

If the above is a bit much, I think this gets to the heart of it... So, I've added, back in, the delay for the first tween (0.1 this time) of the shadowMorph timeline (which sets the opacity of the current shadow [shadow-9] to 0, before setting opacity to 1 for the proceeding element), so now you can see it working properly. And I've done the same for the last timeline which has fixed that one too. I'm just not sure why this has worked. I thought a delay on the first tween of a timeline would be unnecessary since you can determine its position from the master timeline?

Hi folks, I'v been going around in circles for a while now, so thought I'd better ask for some help. Okay, so I'm using opacity to fade in and out various child elements of an SVG and thusly animate a stickman. I have several timelines nested inside a master timeline and for now a mouseenter event listener to play the sequence. It's been working mostly as I've anticipated but for some strange behaviour relating to the fourth and last timelines. Issues: 1. The forth timeline animates through 'frames' of a morphing shadow, but for some reason the first frame ('.shadow-morph-1') appears at the very start of the master timeline. For some reason I was able to remedy this by putting a delay of .001 as a default on the child timeline, but I'm sure this isn't ideal. 2. The last timeline seems to have the same issue, its first 'frame' (stickman-r-1) is visible at the start of the parent timeline, and also when it completes stickman-9 remains visible when this timeline should have set its opacity to 0. I can see in the chrome inspector that these elements have their opacity set inline, to 1 when the page loads (stylesheet shows 0 for opacity), but I have checked the element in the code editor (VSCode) and there is no style attribute, so this must be being set in the timeline. Sequence: First Timeline name: taDa() desc: 'Hands on hips' through to 'pointing at bag' stickman-1 through to stickman-9 (and shadow-1 to shadow-9 ) Fourth Timeline name: shadowMorph() desc: shadow becomes a circle selectors: shadow-9 to shadow-morph-1 through to shadow-morph-4 Last Timeline: name: toRest() desc: 'Pointing at bag' through to 'hands on hips' stickman-9 to stickman-r-1 and stickman-r-2, to stickman-1 I'm sorry the it's a bit of a complex animation. I've been trying to shorten it and make it simpler, but I think that will just make it more confusing. That said any suggestions on how I can make it easier to follow are very welcome. Thanks in advance for any offerings.