charlescollective

That's really helpful thank you, I now understand how to use it

Is that a no to different properties or to a simpler method? I’m a newbie to js so I’ve been using basic timeline and scroll trigger animations hence me looking for an out of the box solution. If there’s no simpler method that’s fine but would love to be able to adjust the code to work with different properties like the ones mentioned above

Hi again, I've linked the GSAP skew on scroll demo as a reference... I'd like to test animating other properties reacting to the scroll velocity like scale, width, height, border-radius, rotation, opacity, etc. I wonder if there is a more straightforward approach to achieving this effect as GSAP has evolved over the years? Thanks in advance. Charles

Awesome thank you guys for your help. Much appreciated as I've got it working thanks to your solutions. 🤝

Hi, I've thrown together a basic codepen where you'll see some circles growing in and shrinking in a loop. These will be client logos and could have 10-15 logos in the final outcome - https://codepen.io/charlescollective/pen/JjzbROZ The problem is at the start and end points of the timeline - we start with nothing visible and end with nothing visible before looping again. I've tried to combat this with the use of .totalProgress(0.5); to start the timeline at 50% with repeat: -1, but this just sends the timeline back to the start once the timeline has finished (rather than looping from the 50% mark specified). It also seems like my usage of it hasn't even worked in setting to the half way point. With this method, I'd also need to specify an end point to the tween that isn't 100% (end of timeline) in order to make sure there are always 3 circles visible at all times and creating a seamless loop. I'm not sure if my approach is completely off on the wrong track or not but I'd be really grateful to hear your ideas on how to make this work. Below is a gif of the sort of thing I'd like to achieve... Thanks in advance!