Viz

Hey Guys, I've managed to solve the problem of syncing the image and text by using the onComplete and onReversecomplete functions for each stagger. Posting the solved pen here for anyone who might need it in future. https://codepen.io/vsaini603/pen/ExNybqQ @mikel: Thanks for the reference.

Hi Guys, Thanks for this awesome gsap lib again. I'm still learning it but the library is really powerful and quite fun to explore. I need some help with the animation where my container gets pinned on screen and then the image is horizontally moved with the scrolling. This part works fine in the codepen above. What I need with this is for the text in the adjacent container to smoothly show hide along with this image movement. Obviously the number of texts will be the same as the image movements so that wont be a problem. Thanks for any help in advance.

Hi @mvaneijgen, This is extremely helpful. I was trying to stagger each element by running through a loop but I see now why that was wrong. I still have the problem that it doesn't completely hide the first element before showing the next one. That is, there is a scroll area where I can see both the texts even if I use autoAlpha with display:none. See this codepen for reference. Once again, thanks for responding so promptly with a easy solution.

Hi Forum, I have a simple yet eluding problem to solve. Sorry for a crappy codepen, its not very close to what I need but just a reference. My requirement is that I want to pin a container that has 3 blocks of text. When scrolling through this pinned container, the 3 blocks of text should show themselves one by one. But when the next block shows, the previous one should hide itself, meaning, at a time only one of the blocks would show (The other ones should not ever take any space on the container - so they have to be display: none.).

Hey @mikel, Thank you for your reply. But what I am looking for is rather than changing the duration of the complete animation, if I can change the duraiton of each transition. Which means that the opacity change from 0 to 1 without any intermediate value.

In the code that I shared, the element is selected and transitioned directly from 0 to 1.

This is absolutely perfect! And cheers for sharing the documentation along with it. I have a small issue with this though, while I scroll, the images transition from opacity - 0 to opacity -1. But somewhere between that there is a intermediate state where the opacity is between those. At this point in time, two images are visible (see the image attached) and that is what I was trying to avoid with my code.

Hi All, I'm trying to achieve a image sequence animation where the images are actually over each other but they show only one at a time. The animation between switching the image should be smooth. I have done this via the onStart and onComplete methods of StaggerTo but that seems like not a efficient use of GSAP library. Also it means I have to repeat the method for each image (which can be resolved with a loop but I was hoping to use stagger methods more efficiently. Can this be done better? Please see code pen here : https://codepen.io/vsaini603/pen/dyovwrW for demo.