Archetype

Hi Mikel. Thanks for this, this would work. I've noticed that the onUpdate doesn't continue firing while scrub is set to 1 and the animation is catching up, it stops firing as soon as you stop scrolling. Do you know how I could continue firing onUpdate while the animation is catching up with scrub?

Hi everyone, I'm trying to get the value of the translate3d used on the element a ScrollTrigger is active on using the onUpdate method. I know you can get the scroll progress value but I don't know how to get the translate3d value. ScrollTrigger.create({ trigger: '.trigger', pin: true, start: 'center center', end: '+=300', onUpdate({ progress, scroll }) { console.log(progress); console.log(scroll()); // How do you get the translate3d (x, y) values? } });

I think I've figured it out. Scrub should be set to "true" and the container should have the exact width size of the contents otherwise it will display the extra space towards the end.

Hi everyone I'm having some issues with scrolling horizontally using ScrollTrigger. Firstly we have one very wide section which we want to scroll and it's working fine however there's a large space towards the end, not sure where that's coming from. Secondly we have elements in the wide section which we want moving slowly to give a parallax effect (see bottom white box) however what's happening is that the box moves once the scrolling stops instead of moving with the scroll. We also want the box to move only when it's in view. Note: We have dragging setup in the main project so a user can drag horizontally however I haven't put that in the codepen. Can anyone point me in the right direction?

@akapowl thanks so much, this is exactly what I was looking for, really appreciate it.

Hi there I'm trying to create a page which can be scrolled horizontally and by dragging too. I've set this up and it seems to be working however after I drag the page and try to scroll it doesn't scroll from the last drag position, it scrolls from the last scroll position. How do I update the ScrollTrigger so that it scrolls from the last drag position? It does work the other way around. Also I'm assuming that I have to dynamically set the bounds width so you can't drag the page outside the area?