_youri Posted October 23, 2020 Share Posted October 23, 2020 Hi, For my website I'm trying to use the code from snorkl.tv in order to have a smooth scroll : https://www.snorkl.tv/scrolltrigger-smooth-scroll/ I've created the div with a class="scrollContainer" and used the proxy method but I'm stucked. Because my timeline is broken. Here is a Pen of my code. Where am I wrong ? You should open the pen in a new window as my div have width bigger that the display in Pen ! See the Pen LYZxZPW by _youri (@_youri) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted October 23, 2020 Share Posted October 23, 2020 Hey @_youri You are actually not loading any of the neccessary js-files in your pen, so there is no way it would work. 1 Link to comment Share on other sites More sharing options...
_youri Posted October 23, 2020 Author Share Posted October 23, 2020 Ok. I'm sorry, I've fixed it ! Link to comment Share on other sites More sharing options...
akapowl Posted October 23, 2020 Share Posted October 23, 2020 You are using GSAP and ScrollTrigger v 3.3.3, but scrollerProxy was introduced in 3.4.0, so you should update your files. 2 Link to comment Share on other sites More sharing options...
_youri Posted October 23, 2020 Author Share Posted October 23, 2020 Thank you for this advice, I've just loaded those ones :https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.jshttps://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js Link to comment Share on other sites More sharing options...
akapowl Posted October 23, 2020 Share Posted October 23, 2020 You are missing a '/' on one commented out part in the js That throws an error in the console - you can see it, when you open up dev-tools in debug-view / each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. That breaks everything. Sidenote: In your CSS there is also one part, that is not commented out the way it should be <!-- transform: scaleY(-1); --> Edit: Woof, that sort of sounds a bit sour, always starting with 'You...'. Sorry, if that comes across a bit rough - not intended 2 Link to comment Share on other sites More sharing options...
_youri Posted October 23, 2020 Author Share Posted October 23, 2020 Ok, it works better now, but If I scroll fast, down page, my divs take a little time to appear... I guess there is a timing problem, when I'm in Full Page View on the Pen, scrollTrigger runs but my page stay empty... Link to comment Share on other sites More sharing options...
akapowl Posted October 23, 2020 Share Posted October 23, 2020 That is related to how you set things up. If you want the animation to be triggered earlier, change the start, maybe to 'top bottom' - when the top of the section hits the bottom of the window. If you want your animations to animate quicker, change the duration on the tweens. Here's an example See the Pen 30eb64f4de6919ff95bb5e195830c7ee by akapowl (@akapowl) on CodePen 3 1 Link to comment Share on other sites More sharing options...
akapowl Posted October 23, 2020 Share Posted October 23, 2020 @_youri Alright, now I see the problem. Sorry, I missed it before, because codepen is sort of slow for me today and the loco-scroll wasn't even active when I tested. Seems, you need to set your body's overflow to hidden, for things to work properly. Also, I added scroller: '.scrollContent' to your ScrollTriggers, so they know where the scrolling is being worked on. See the Pen 6c9f37d82b2c94f7a8e4ed0d763a66cb by akapowl (@akapowl) on CodePen Does this resolve your issues? 3 Link to comment Share on other sites More sharing options...
_youri Posted October 23, 2020 Author Share Posted October 23, 2020 Yes, that's exactly the problem I couldn't solve yesterday and today ! Now It works nicely and properly ! Thank you for your help akapowl, and to be so reactive. 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