Jump to content
GreenSock

Studio7

Scroll Triggered Card Stack without the loop!

Go to solution Solved by OSUblake,

Recommended Posts

HI everybody,
since this is my first time here, before i start, i want to thank everybody for everytime i found a solution in this forum. :D
That said, i'm trying to remove the loop functionality in the beautiful

See the Pen LYRwgPo by GreenSock (@GreenSock) on CodePen

you did but i'm pretty new w gsap and i'm getting a lot of error and issues. 
Every hint, advice or direction to follow would be appreciated.. 

thank you again

See the Pen LYevWGx by na86 (@na86) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums @Studio7

 

To prevent it from looping, you just need to get rid of the wrapForward/wrapBackward calls.

 

onUpdate(self) {
			if (self.progress === 1 && self.direction > 0 && !self.wrapping) {
				// wrapForward(self);
			} else if (self.progress < 1e-5 && self.direction < 0 && !self.wrapping) {
				// wrapBackward(self);
			} else {
        scrub.vars.totalTime = snap((iteration + self.progress) * seamlessLoop.duration());
				scrub.invalidate().restart(); // to improve performance, we just invalidate and restart the same tween. No need for overwrites or creating a new tween on each update.
				self.wrapping = false;
			}

 

See the Pen PoEgOOm by GreenSock (@GreenSock) on CodePen

 

But that's a rather complicated demo to learn from. It might be easier to start out small and build up to what you want following this article. And, of course you can ignore the looping parts, but the animations might still be helpful.

 

Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling | CSS-Tricks - CSS-Tricks

 

  • Like 3
Link to comment
Share on other sites

That was fast.. :D
i will definitely read the article. Don't now how i missed it so far.. guess internet is full of cool stuff, right?!
Don't know how to thank you @OSUblake
 

  • Like 1
Link to comment
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.
×