cobragtk

Thank you @mvaneijgen for such quick response. I appreciate you getting the ball rolling! Also I was not aware of GSDevTools, so that was super helpful! Thank you @akapowl - your response is so helpful in terms of learning and also I think it was crucial how you honed in on exactly what the problem was: Also before going further your solutions are exactly what I needed, so thank you! Also thank you for going above and beyond with the label animation as that was also something I needed to add. Amazing work! After digesting what you wrote and looking over your Codepen it makes perfect sense, however I still have questions So when you console.log the timeline's duration: console.log( `Timeline duration: ${tl.duration()}` ); // it logged 6.5 Why would the duration not be equal to 19 or number of tick marks (19) x tween duration which is 1? Apologies if this is a silly question. Regarding the each value in the stagger... I saw that you added a comment of each: 0.25, // keep in sync I was wondering what you meant by this. 0.25 seems to give it a nice effect but playing with this number just makes it staccato (larger time between tweens) versus smoother (smaller time between tweens). I guess the question is that, this doesn't have any bearing on the duration of the overall timeline, is that correct? Lastly, I'm blown away by how elegant this solution is, so thank you! The link to the video Tween the progress() and timeScale() of an animation was very helpful.

Hi there, I'm trying to create an effect where as the user scrolls down the page I animate a series of lines. I've created a minimal pen which is relatively close to what I'm looking for. I'm also attaching some images which show the general pattern of the animation from the start and as the user would scroll further on down the page. (Note: I'm only attaching a few images which show the overall progression but hopefully the wave pattern is discernible) Some of the issues I'm having are: I'd like to start the lines as I have shown in the first image. I have achieved this but when my animation happens it doesn't tween the lines all the way back to the shortest width, if that makes sense. Essentially each line needs to go from a minimum value which is at the smallest 20% of 170px and then to a maximum of 170px. I also wasn't sure whether I could achieve what I'm after with stagger or by using the distribute function. Any help or advice would be greatly appreciated!! Thanks in advance.