Alex M

Hi @Rodrigo thanks, I started to like this approach. I've recreate a pen here: https://codepen.io/maqquo91/pen/NWBRYXL and I figure out that I was totally misunderstanding the ease functions. I just posted here in case anyone else bumped into this problem: ease: SteppedEase.config(4) // This need to match the current frame that steps from the previous one, instead of the whole number of frames. I'll start with this approach and keep going.

Hi @GreenSock, thanks for the answer, I really appreciate it. I'm aware of the inefficiency but I really was hopeless and discourage. As a workaround to have the socks position always as I wanted, I used the snap: OPTION 1: snap Here is a minimal demo with snapping working and animation all set: https://codepen.io/maqquo91/full/rNrMmwK What I don't like about this solution is that the sock isn't smooth, I think because goes directly from 0 to -3600 instead of doing all the steps. Another thinks that I'm unable to understand is why is the difference between set and to: If I use the method .set the animation is working but if I use to. with ease function the animation isn't working. //Animation working tlSprite2 .set("#socks-container .frames", { x: -(spriteW * 10) }); //Not working tlSprite3 .to("#socks-container .frames", { x: -(spriteW * 14), ease: SteppedEase.config(36) }) OPTION 2: I like the smoothness of the socks rotating here but I can't figure out how to sync this on a timeline and calculate how far does the socks need to move from one point to another. What I'm trying to achieve is to sync the animation of the socks scrolling with the interaction of the other sections, so basically - from header to "section-1" the socks should move from 0 to -3.600 - from "section-1" to "section-2" move -6.000 - from "section-2" to "section-3" move -8.400 The exact frame allows me to insert some information and arrows for displaying the features of the product. Thanks in advance

Hi, I'm back again looking for some advices. I'm trying to replicate this animation: https://drive.google.com/file/d/1-DAuIAuSgHehIwyQbWeWb9wjMhyAcY4Z/view?usp=share_link on this example I've worked with scrolltrigger for every sections and animating the entering elements but the main issue here is that the frame of the socks are always different depending on the viewport size. So I decided to come back with simple js and css animation: I'm having all the section on position fixed so everything will be on the same position on every screen. I'm checking the frame that I need and if we are on that specific frame I put a class to show the correct section setting opacity at 1. I'd like to use gsap for animate the elements inside every section with the class of 'js-show' but if I use a functions it runs multiple times. Any idea how to do this? https://codepen.io/maqquo91/full/oNMxROz

Thanks a lot, Jack, that is exactly what I wanted to achieve. And happy new year.

Hi folks, I'd like to control the scroll behavior by forcing it to scroll to the next section. I've tried to follow this example https://codepen.io/GreenSock/pen/NWxNEwY but my pen isn't working. It is stuck to the first section. Do you have any idea why that's happening? Here is my demo: https://codepen.io/maqquo91/pen/LYBNovZ Thanks in advance

Thanks, @Rodrigo, that really helped point me out in the right direction. I think the canvas solution you proposed is neater. I'm actually after an effect to have more control over the position: for instance #section-2 should be on this specific frame, #section-3 on another specific frame, and so on.

Hi there, I'm trying to replicate this effect: https://codepen.io/jayanthracharya/pen/OJxyPpa but I can't figure-it out how to make this working with ScrollTrigger. Here my demo: https://codepen.io/maqquo91/pen/YzjqJZw Any Ideas why isn't working?