Play each timeline once on one scroll each

[Pollux Septimus]

Hi, 

I am trying to create an animation where I scroll once and the text from the first card disappears and the text from the other appears while the image is rotating.  I would like for the animation to start playing only when I scroll and the scroll should pe pinned until the animation ends. Also I would like it to for each card. Say I have 3 card, I would like to be able to scroll 2 time so all the card are visible. 

 

I have created a minimal demo, maybe you could point out my mistake. Some demos example would be grate as well. 

 

See the Pen MWVpPRe?editors=0010 by raul-rogojan (@raul-rogojan) on CodePen

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "Here are my list of requirements: ____, now please show me how to build it" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You had a typo in your code with scrollTrigger (you had a 9 character in there). I don't really understand what you're trying to do but you said "...be able to scroll 2 times so all the cards are visible" but I don't know what "one scroll time" would be exactly. People may spin a scroll wheel, drag the scrollbar, press the down arrow, spacebar, pagedown key, or swipe on their touchpad - what counts as "one" precisely? 

 

Maybe you should look at Observer plugin if you just want to trigger something as soon as someone does a scroll-like behavior in a certain direction. 

 

You'll have logic problems if you're trying to make something stay pinned until an animation is done unless you're enabling the scrub feature (I notice you set that to false). 

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. But please be very specific about a GSAP question (rather than listing out your requirements and asking us to do all the customization for you) 

[Pollux Septimus]

Hi @GSAP Helper, 

Maybe my question wasn't structured is the best way. I will create another thread with a batter mini demo and a batter structured question. 

I simply ask for someone to point out my mistake for why the animation doesn't stays pinned and not working on a single scroll and maybe for some existing demos that I might have missed. I DID NOT asked you to do all the customization for me, the reason I tried to detail what I wanted to achieve is to give you a batter perspective looking into it not as a mean for someone to do it for me.

 

Simply put, the issue is that I am tiring to play one timeline at the time on each scroll, while the section is pinned. I want the animation to play normally not as scrub (that's why is set to false) and not matter the y position, scroll,  delta or any of the actions you named above.  

 

I will take a look at the observe plugin maybe that is what I am looking for. 

 

Thank you very much for your answer and I apologize for my bad question.

[GreenSock]

No need to apologize - it's hard to explain my vision sometimes too, especially when there are multiple things going on.

 

You said you want it to pin...and you don't want scrub...but you want pinning to somehow be tied to the animation such that it refuses to unpin until the animation finishes playing? If I understood that correctly, I think that's logically impossible. Or did I misunderstand your goal? 

 

It looks like your demo does in fact pin currently. Are you saying you don't see it pinning at all? 

[Pollux Septimus]

6 hours ago, GreenSock said:

You said you want it to pin...and you don't want scrub...but you want pinning to somehow be tied to the animation such that it refuses to unpin until the animation finishes playing? If I understood that correctly, I think that's logically impossible. Or did I misunderstand your goal? 

Yes, so you saying that its impossible? 

I looked up the observer and it seems that is what I am locking for, but all demos are full vh / vw.  Is there a way to transition to normal scrolling and have content below after something like this was implemented? 

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

 

If gsap doesn't have this ability's, js has a function that disables the scroll. I think I could disable it and enable it once the animation finishes using the onComplete function from gsap. 

This is just a though, I would have to code it to see fi it works. 

[GreenSock]

10 minutes ago, Pollux Septimus said:

Yes, so you saying that its impossible? 

I'm saying it's logically impossible. When you pin something, it's based on the scroll position. So let's say your page has 1000px worth of possible scroll and you set up a ScrollTrigger to pin an element between 0 and 500px. Fine. And you could start your animation as soon as that pin starts. Cool. But you said you DON'T want scrub, so let's say you've got a 10-second animation that starts playing and then the user drags the scrollbar all the way down to the bottom of the page quickly...how can it stay pinned until the animation is done? See how it's logically impossible? Or you'd have to allow scrolling only until 500px (before the animation is done) and then...what, the user's control suddenly gets yanked away from them? You'd implement JavaScript to FORCE the user not to be able to drag the scrollbar or flick their mousewheel or use the spacebar to go down on the page? That sounds like terrible UX. I certainly wouldn't want to visit a site like that. 

 

But maybe I misunderstood your goal. 

 

43 minutes ago, Pollux Septimus said:

Is there a way to transition to normal scrolling and have content below after something like this was implemented?

You can do anything you want - Observer just tells you about when the user attempts certain actions. You decide how you want to respond to those. 

[Pollux Septimus]

I understand.

I will try observer plugin and I will come back If I have difficulties.