lklio Posted October 29, 2020 Share Posted October 29, 2020 Hey guys, as you can see from Codepen I have some pinned sections managed with ScrollTrigger. However, I would like to wait for the animation on the image (clipPath) to complete before I can scroll to the second section. Can anyone help me figure out how to do it? Another thing, which is the best scrolling Event to update a counter that show the current "slide"? (like 1/4, 2/4, 3/4, ...) Thank you See the Pen KKMQxYR by billmn (@billmn) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted October 29, 2020 Solution Share Posted October 29, 2020 Hey @lklio Here's how you could do it, without having to make any changes to your HTML/CSS setup: 1) Differentiate between allSections, firstSection and otherSections (meaning other than first) 2) For the firstSection, split your one ScrollTrigger for the image-animation and pinning into two seperate ScrollTriggers, each handling one part. The first one, handling the animation, runs shorter than the other one for the pinning - the later one has to run longer, so it makes the sliding-in-over of the next section possible, when your animation of the image has already finished. 3) Set each of your other sections down on thy y-axis 100% initially ( to make sure, the second section won't come scrolling into view, when your first section is still animating - and keep the ScrollTrigger for them as you had it setup for each section in your pen. That was the 'waiting for the animation to finish' part. 4) For updating the current slide ( as you can see in the console, when you fork the pen below and look at it in debug view ), I would suggest, you set up yet some more ScrollTriggers, but this time for each single one of the sections, with which in the callbacks you can update the current slide in whatever function you want it to - in my example, I used the onEnter and the onLeaveBack with the start of the trigger set to when the top of the section enters/leaves the bottom of the window. See the Pen ba2ce428b2573c3c96eecd8b02abc0a2 by akapowl (@akapowl) on CodePen I might be overcomplicating things - but I couldn't see any other way, without making changes to your HTML/CSS setup. Hope this helps, makes sense to you, or at least inspires you on how to handle things. Cheers, Paul 3 Link to comment Share on other sites More sharing options...
lklio Posted October 30, 2020 Author Share Posted October 30, 2020 Wow, thank you very much for your solution! it works very well! Link to comment Share on other sites More sharing options...
lklio Posted October 30, 2020 Author Share Posted October 30, 2020 Hey @akapowl, I notice now that: gsap.set(section, { yPercent: 100 }) Doesn't allow a user to click on an element inside a slide (like a video) because is 100% translated on the y-axis. Try this Codepen that include a video, you can't click on video controls: See the Pen mdExXEr by billmn (@billmn) on CodePen Thoughts on how to solve this? (HTML can be changed if can help) Thank you! Link to comment Share on other sites More sharing options...
akapowl Posted October 30, 2020 Share Posted October 30, 2020 Instead of setting each section down individually, you could also wrap all but the first section in a wrapper-div, and just move that wrapper-div downwards. Doing so by setting a margin-top to that wrapper in your CSS seems to work fine. See the Pen 45dba0d588f642e9e4a6376e47b957f6 by akapowl (@akapowl) on CodePen 2 Link to comment Share on other sites More sharing options...
lklio Posted October 30, 2020 Author Share Posted October 30, 2020 It works like a charm, thank you! Link to comment Share on other sites More sharing options...
lklio Posted October 30, 2020 Author Share Posted October 30, 2020 Sorry @akapowl but I notice a strange thing ... any idea on why if you click on the Fullscreen video control the video opens in fullscreen and come back immediately? Removing this code, the video opens in fullscreen correctly: otherSections.forEach((section, index) => { tl.to(section, { scrollTrigger: { trigger: section, pin: true, pinSpacing: false, }, }) }) Link to comment Share on other sites More sharing options...
akapowl Posted October 30, 2020 Share Posted October 30, 2020 It seems to be related to the pinning indeed, but I can't tell you anything else than that. Maybe @GreenSock or @ZachSaucier can shed some light. Link to comment Share on other sites More sharing options...
ZachSaucier Posted October 30, 2020 Share Posted October 30, 2020 I think the fullscreen API closes fullscreen mode when the DOM changes in some circumstances. Not sure what causes that or how to work around it in this circumstance. If you figure out GSAP/ScrollTrigger is doing something it can improve upon, @lklio, please let us know. Or even if you figure out what exactly causes the un-fullscreen. But it's not a common enough scenario for us to try and figure out a workaround right now. Link to comment Share on other sites More sharing options...
lklio Posted November 2, 2020 Author Share Posted November 2, 2020 Hi guys and thank you for your support. To workaround this issue, I have tried to move the <video> node outside the "project-section" managed by GSAP clicking on a button that will replace the native controls of the video. Now the player stays fullscreen but, when I go out, the timeline scroll to the next section (probably because of snap). See the Pen GRqdGGr by billmn (@billmn) on CodePen Does exists a way to prevent this? 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