Freddan Posted September 24, 2022 Share Posted September 24, 2022 Hello everyones, I developed this minimal demo in which I'm trying to making appear the first blue square before the container get zoom-in and the second purple square inside the zoomed container without being affected by the parent zoom-in fx. I'm struggling to understand how to combine the elements. See the Pen QWrOwLp by Freddan3 (@Freddan3) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted September 25, 2022 Share Posted September 25, 2022 Hi @Freddan and welcome to the GreenSock forums! Maybe this code works like you want: gsap.from(".square_1", { scrollTrigger: { trigger: ".section", start: "top 60%", pin: "true", toggleActions: "restart complete play reverse", }, duration: 0.2, opacity: 0, xPercent: 2500, ease: "none" }); Let us know if you have any other questions. Happy Tweening!!! Link to comment Share on other sites More sharing options...
Freddan Posted September 25, 2022 Author Share Posted September 25, 2022 Hi Rodrigo, many thanks for your warm welcome and for the support you're giving to me. I tried to follow your suggestion but I am still having some problem. I would like to make possible that during each animation inside the container (blue square and purple square) the container will stop to scroll.. I guess I should pin it in two different times. Then it would be great to make the first blue square fading-out before the second one (purple) will appear. Thanks again for all your support Link to comment Share on other sites More sharing options...
GreenSock Posted September 27, 2022 Share Posted September 27, 2022 I may not be understanding you correctly, but this sounds to me like a good case for just putting your animations into a single timeline and then attach your ScrollTrigger to that timeline. My recommendation would be to ignore ScrollTrigger initially - just get a regular animation playing immediately the way you want, and THEN wire it up to the scroll position with ScrollTrigger. If you get stuck, go ahead and post your minimal demo with a GSAP-specific question and we'd be happy to take a peek. 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