olr777 Posted May 16, 2022 Share Posted May 16, 2022 maybe I'm doing it wrong, the thing is that after using the stagger to open the lid when he wants to add another animation .to (...) it stops working on the scroll, when I remove the lines responsible for opening the lid, it works fine. Did not work .to(".anim-bin__img__item--3")..as if transform x is performed immediately without using a scroll let bin = new gsap.timeline({ // defaults: { // ease: "none", // }, scrollTrigger: { trigger: ".sec-anim-wrap", start: "top top", end: () => window.innerHeight, scrub: true, markers: true, pin: ".sec-anim-wrap", } }) .to(".anim-bin__img__item-plat--10", { opacity: 0, // stagger:100 }) .from(".anim-bin__img__item-plat--all", { opacity: 0, stagger: 100 }, -1) .to(".anim-bin__img__item-plat--all", { opacity: 0, stagger: 100 }, 100) .set(".anim-bin__img__item-plat--1", { opacity: 1, }) .to(".anim-bin__img__item--3",{ y: -850, }) Link to comment Share on other sites More sharing options...
GSAP Helper Posted May 16, 2022 Share Posted May 16, 2022 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
Trapti Posted May 16, 2022 Share Posted May 16, 2022 Stagger value and delay value 100 doest not look good to me. Just remember it is in seconds. 1 Link to comment Share on other sites More sharing options...
olr777 Posted May 16, 2022 Author Share Posted May 16, 2022 Ok, I posted it on codpen. At the end, these two containers are to flow smoothly into this basket on the scroll, now they appear there immediately. When I remove the code responsible for opening the flaps, where there is a stagger, it works smoothly. Link to codpen: See the Pen gOvgvwR by olr777 (@olr777) on CodePen Link to comment Share on other sites More sharing options...
olr777 Posted May 16, 2022 Author Share Posted May 16, 2022 1 hour ago, Trapti said: Stagger value and delay value 100 doest not look good to me. Just remember it is in seconds. @Trapti can I ask you to check my codepen code? I will be very grateful! :) Link to comment Share on other sites More sharing options...
Cassie Posted May 16, 2022 Share Posted May 16, 2022 1 hour ago, Trapti said: Stagger value and delay value 100 doest not look good to me. Just remember it is in seconds. Adjusted to use 1 instead of 100 like Trapti's suggested - See the Pen YzeNLoy?editors=1010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Cassie Posted May 16, 2022 Share Posted May 16, 2022 Looks like you need to work on your timings a bit though If I were you I would get rid of ScrollTrigger and just focus on getting the timing on your timeline feeling right. Then add scrollTrigger afterwards This will help! 1 Link to comment Share on other sites More sharing options...
olr777 Posted May 16, 2022 Author Share Posted May 16, 2022 41 minutes ago, Cassie said: Adjusted to use 1 instead of 100 like Trapti's suggested - Hmm, that's not what I meant, the flap lifted well, smoothly and quickly - now it's like an opacity clearance, now there is no smooth . My point is that when the flap is raised, these two containers are supposed to fall from the top into the middle, but they do it so quickly that you can't see the animation. I would like to write .to(...) because there will be a few more sequences, but after doing the stagger I can't move on, everything happens quickly, I think I need to separate it somehow .. maybe someone can help me quickly separate it and write it down correctly so that I can understand it Link to comment Share on other sites More sharing options...
olr777 Posted May 16, 2022 Author Share Posted May 16, 2022 58 minutes ago, Cassie said: Looks like you need to work on your timings a bit though If I were you I would get rid of ScrollTrigger and just focus on getting the timing on your timeline feeling right. Then add scrollTrigger afterwards This will help! hmm Link to comment Share on other sites More sharing options...
Cassie Posted May 16, 2022 Share Posted May 16, 2022 Your just need to tweak your timings - your stagger was spaced over 100 seconds and the drop down of one of the bins was 0.12 seconds. That's a huge difference. You're almost there! Is there a GSAP specific question we can help with? Are you struggling to understand a particular part of this? See the Pen YzeNLoy?editors=1010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
olr777 Posted May 16, 2022 Author Share Posted May 16, 2022 50 minutes ago, Cassie said: @Cassie Your just need to tweak your timings - your stagger was spaced over 100 seconds and the drop down of one of the bins was 0.12 seconds. That's a huge difference. You're almost there! Is there a GSAP specific question we can help with? Are you struggling to understand a particular part of this? ok, I understand but I still have a question, is there an option to accelerate the opening of this cover? to make the disappearance of subsequent img faster? (like at the beginning when I sent the link)? when I change the stagger or delay, the next stage stops working (falling containers) and this is the main problem that I cannot deal with. Link to comment Share on other sites More sharing options...
olr777 Posted May 16, 2022 Author Share Posted May 16, 2022 1 minute ago, olr777 said: ok, I understand but I still have a question, is there an option to accelerate the opening of this cover? to make the disappearance of subsequent img faster? (like at the beginning when I sent the link)?so that there is no glow when loading the next img of the cover.when I change the stagger or delay, the next stage stops working (falling containers) and this is the main problem that I cannot deal with. Link to comment Share on other sites More sharing options...
Cassie Posted May 16, 2022 Share Posted May 16, 2022 I don't understand your question The next stage didn't stop working because you added a stagger, the next stage stopped working because your stagger was lasting 100 seconds. Link to comment Share on other sites More sharing options...
Solution Cassie Posted May 16, 2022 Solution Share Posted May 16, 2022 Something like this might work, using keyframes? See the Pen oNEBQYG?editors=1011 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
PointC Posted May 16, 2022 Share Posted May 16, 2022 You can drop the duration to get something quicker to avoid the ghosting of the prior image and then adjust the stagger to your liking. See the Pen e2610efcbdf13b2eef10db071f8e6f91 by PointC (@PointC) on CodePen 2 Link to comment Share on other sites More sharing options...
olr777 Posted May 16, 2022 Author Share Posted May 16, 2022 thanks for the help! I think I understood a lot! great support !! 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