ScrollTrigger doesn't scale to 0.7 while scrolling

[Andy777]

How i make this scale to 0.7 on scrolling? I mean the first section to scale

See the Pen dyqPbMB by Andy199807 (@Andy199807) on CodePen

[mvaneijgen]

ScrollTrigger uses the native scroll to do all its logic, you are overwriting that native scroll by setting the body to overflow hidden. If you don't know 100% what you are doing and why you're doing it I recommend not overwriting the default scroll behaviour and just let the browser handle scrolling! This will save you a lot of debugging later.

 

I would also recommend getting in the habit of animating a different element than your ScrollTrigger. ScrollTrigger uses the location of the trigger element to calculate everything, if you then move that element with an animation ScrollTrigger loses track of that element (so to say). Hope it helps and happy tweening! 

 

See the Pen YzOPzyN by mvaneijgen (@mvaneijgen) on CodePen

 

That said, you can set the scroller to a different element then the default viewport, but again only do this if you're confident in your skills and 100% know what you're doing, see the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

 

String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.