Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
_youri

scrolltrigger with smooth scrolling and Locomotive

Recommended Posts

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 post
Share on other sites

 

Hey @_youri

 

You are actually not loading any of the neccessary js-files in your pen, so there is no way it would work.

 

  • Like 1
Link to post
Share on other sites

 

You are using GSAP and ScrollTrigger v 3.3.3, but scrollerProxy was introduced in 3.4.0, so you should update your files.

  • Like 2
Link to post
Share on other sites

 

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 :) 

 

 

  • Like 2
Link to post
Share on other sites

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 post
Share on other sites

 

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

 

  • Like 3
  • Thanks 1
Link to post
Share on other sites

@_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?

 

  • Like 3
Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×