GsapLover Posted September 12, 2022 Share Posted September 12, 2022 Hey, pls help me in a scenario like if I scroll fast then I miss the text and it jumps to the next section. It should always show the text and image swapping section should be in view when user scrolls again. I am sharing a demo here. See the Pen YzLWdKM?editors=1010 by Sumitsharmaji438 (@Sumitsharmaji438) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted September 12, 2022 Share Posted September 12, 2022 Hi there! Something like this maybe? See the Pen OJZXGdp?editors=1010 by GreenSock (@GreenSock) on CodePen A tip - scrub and toggleActions serve completely different use cases and can't be used together. either scrub or toggleActions I also noticed that you're using deprecated syntax. Check out the migration guide here https://greensock.com/3-migration/ 1 Link to comment Share on other sites More sharing options...
GsapLover Posted September 12, 2022 Author Share Posted September 12, 2022 Hi Cassie, Thanks for replying and suggesting migrations, But still the image 1 or image 2... are overlapping the text if I scroll very fast. I want that when image 1 will be the in view then text should be hidden and If I fast scroll at very first time then it should not be scrolled more than paragraph text. I hope that makes sense. can you please help me regarding the same? Link to comment Share on other sites More sharing options...
Cassie Posted September 12, 2022 Share Posted September 12, 2022 Ah, yeah I think you're looking for 'events' not scroll. It will certainly be harder to figure out and set up - you'll need to write custom logic to handle everything. But Observer is where to start figuring it out. (I personally wouldn't go for this approach if you're new to coding/GSAP)https://greensock.com/docs/v3/Plugins/Observer 2 Link to comment Share on other sites More sharing options...
GsapLover Posted September 13, 2022 Author Share Posted September 13, 2022 yeah I was looking for the same thanks for understanding and yes, I m new to GSAP.😧 But now, facing two main issues using observer- - facing a jerk while moving or touching. - And not able to scroll or move to the next section after the text is visible. See the Pen YzLWdKM by Sumitsharmaji438 (@Sumitsharmaji438) on CodePen please help.. 1 Link to comment Share on other sites More sharing options...
Solution Cassie Posted September 14, 2022 Solution Share Posted September 14, 2022 Hey again, I'm not entirely grasping your end goal as the HTML and JS seem a little at odds with each other. The 'app_logo' element isn't in the DOM, your .para animation and .scale_panel animation aren't fading anything in, they're actually hiding the elements, but there's no need to hide them as they're not visible anyway. You're also trying to mix Observer and ScrollTrigger and ScrollSmoother, which will need some very careful consideration to get right. ✨ If I were you I'd step right back and write out some logic steps. Something like this... Quote step 1 - draw in the green line on page load step 2 - observer triggered : fade in text and increase circle mask step 3 - observer triggered : fade out text and decrease circle mask step 4 - disable observer and continue with page scrolling step 5 - trigger scroll triggered animation Then, once you have them laid out - try to think about the logic holes in between your steps, e.g. - What if someone tries to scroll down before the green line is drawn in step 1? Do I want to play step 2 or do I want to disable anything from happening until step 1 is finished? - What if someone scrolls back up after observer is disabled? Do I want to initiate observer again There are a lot of custom logic steps here and unfortunately we can't think it all through for you as there's lots of decisions you'll have to make for yourself about the behaviour! I'm happy to help if you have GSAP specific questions. This demo will likely be helpful to you for an idea of how to approach mixing up scrolling and observer See the Pen ExopjNW?editors=0011 by GreenSock (@GreenSock) on CodePen (As you're new to GSAP it's worth mentioning this is a pretty complex task, if you're just trying to learn, this might be a confusing place to start!) I hope this helps! Link to comment Share on other sites More sharing options...
GsapLover Posted September 16, 2022 Author Share Posted September 16, 2022 Thanks Cassie! 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