Viz Posted February 27, 2020 Share Posted February 27, 2020 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 : for demo. See the Pen dyovwrW by vsaini603 (@vsaini603) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 27, 2020 Share Posted February 27, 2020 Hey Viz and welcome to the GreenSock forums! Yes, there are much better ways to structure this in GSAP Some notes: There is no reason in using a stagger if there is only one target. Staggers only work with multiple elements. See the stagger docs page for more information. Tweens added to a timeline automatically occur after the previous ones, so there's no reason to use onStart/onComplete. We highly recommend using GSAP's .set() method instead of setting properties manually. It's easier to do so! Since your images are layered there's not much point in fading out the previous image - just fade in the image that's on top. If you're using ScrollMagic (which is not a GreenSock product by the way - we don't really recommend using it), the default behavior is to reverse through the timeline if people scroll up so you don't have to do anything in an onReverseComplete. We also highly recommend using GSAP 3's formatting. Altogether, it's super simple! var tl = gsap.timeline() .to("#hero-1, #hero-2, #hero-3", {opacity: 1, stagger: 1, ease: "none"}); The timeline part isn't even necessary if this is all you're doing. You could just do var tl = gsap.to("#hero-1, #hero-2, #hero-3", {opacity: 1, stagger: 1, ease: "none"}); See the Pen rNVmxwb?editors=0010 by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
Viz Posted February 28, 2020 Author Share Posted February 28, 2020 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. Link to comment Share on other sites More sharing options...
Viz Posted February 29, 2020 Author Share Posted February 29, 2020 In the code that I shared, the element is selected and transitioned directly from 0 to 1. Link to comment Share on other sites More sharing options...
mikel Posted February 29, 2020 Share Posted February 29, 2020 Hey @Viz You could adjust the duration. Here a short one, shorter than stagger time See the Pen dyoWxLp by mikeK (@mikeK) on CodePen Happy switching ... Mikel Link to comment Share on other sites More sharing options...
Viz Posted February 29, 2020 Author Share Posted February 29, 2020 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. Link to comment Share on other sites More sharing options...
mikel Posted February 29, 2020 Share Posted February 29, 2020 Hey @Viz, Duration refers to the transition of opacity. You could 'set' it to 0 if you want. Happy testing ... Mikel 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now