Problem with timeline animation when use prev/next buttons

[gnd]

Hi all!

Great got u here! GSAP is awsome but need a help :S

There is horizontall scrolling on section with display:flex; 
Problem is with returning to normal scroll after using next button. 
Animation is flickering and its not starting from point which we already in, becouse of clicking next button.

Second problem is to scroll to pinned section when next is clicked before section is pinned.. But its not working as supposed.

See the Pen gbOreRa by Adam-Gondek (@Adam-Gondek) on CodePen.

[Rodrigo]

Hi @gnd and welcome to the GSAP Forums!

 

Mainly the issue here is that you have a ScrollTrigger instance controlling a timeline with scrub and then you're trying to animate the same value of the same object using a different GSAP instance in your button click handler, that creates a logic jam since two instances are fighting for control of the same property on the same element.

 

What you can do is use the same ScrollTrigger instance and the ScrollTo Plugin to go to a specific scroll value with the button click as shown in these demos:

See the Pen bGVjLwG by GreenSock (@GreenSock) on CodePen.

 

See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen.

 

@mvaneijgen, one of the superstars in these forums wrote a guide on this subject that you should really look into:

 

Hopefully this helps

Happy Tweening!