Scrolltrigger text and video rotation: looking to have "slide" 1 be 0/default and to end at 4

[Joseph L]

Hey all, I have been using the forum resources and demos to help build the linked GSAP/Scrolltrigger section. It's pretty straightforward in objective, but I can't get it to enter and exit how I want and was hoping someone could take a look at my code and let me know if there's a solution.

 

I have 4 sections or "slides"

Patented copy + motionless video 1

2.) Unrivaled copy + video 2

3.) Meticulous copy + video 3

4.) 70% copy + video 4

 

Each video plays and pauses when it is finished, waiting for the scroll to trigger the next section and "continue" playing the video (by playing the next video).

 

My goal:

a.) Scroll into this section and have slide #1 be default, so you do not need to scroll past a blank section to get to it.

b.) Once slide 4 appears, I would like the user to be able to scroll away from this section without, instead, scrolling to a blank space before being allowed to continue.

bonus goal: remove the flashing fade transition between videos

 

I'm sure I have made some grave mistakes with this code, and am looking to this community for a fresh set of eyes. Any help is appreciated.

 

Thank you!

Joseph

See the Pen KKYRvZv by jl-ni (@jl-ni) on CodePen

[Rodrigo]

Hi @Joseph L and welcome to the GSAP Forums!

 

This mostly comes from the fact that you are overcomplicating this quite a bit and your JS is super convoluted.

 

I simplified the part of the texts for you in this demo:

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

 

I left the part of the videos almost intact with the exception of the onLeave and onLeaveBack callbacks in order to not hide the first element when the user scrolls back and the last one when the user scrolls past the final section. I believe that this part can be simplified as well and maybe added to the initial loop, but we don't have the time resources to solve this logic for you. You can look into adding some call methods to the timeline in order to do that:

https://gsap.com/docs/v3/GSAP/Timeline/call()

 

Hopefully this helps.

Happy Tweening!

[Joseph L]

Rodrigo, thank you for your reply.

 

Unfortunately, your changes to the text throw the syncing of the text to video off. It is odd because it works in your codepen. The moment I fork it, it no longer syncs. [Edit: this seems to still be synced incorrectly on the Codepen upon a second look] I have applied the single onLeaveBack and onLeave, but kept the text section close to the same.

 

New codpen:

See the Pen xxejMpb by jl-ni (@jl-ni) on CodePen

 

If you have any idea how I could make it so that section 1 shows up initially like the video, and also to have section 4 stay visible without disappearing at the end. I would be most appreciative.

 

Edited April 10 by Joseph L
Correction to the solution working

[Rodrigo]

Hi,

 

The logic for the texts in your last demo is completely different from the one I posted in my demo.

 

A solution has already been provided and you stated that it works, yet you changed the logic for something that it doesn't. Any particular reason why did you changed it?

[Joseph L]

@Rodrigo - as mentioned before. Your demo seems to break the synchronization. text section1 and video num1  should be synced together, 2-2, 3-3, etc.

 

I understand my code isn't the cleanest it could be, but my main issue was getting these sections to synchronize while having different animations. I had to revert back to my original code because yours was not achieving this.

 

Like I said, the trick with onLeaveBack and onLeave works great for the videos, however! If there's a way to achieve this with the text it would be wonderful. Thank you for your time.

 

Edit:  The sync issue is within your Codepen as well, upon a second look. I can't quite figure out how to sync them when forking yours. It becomes even more apparent if you edit the settings for the text transitions to be more fluid and closer to my original animations. I am sure I am missing something simple here!

d1sections.forEach((section, i) => {
  const previous = d1sections[i - 1];
  if (previous) {
    tl.from(
      section,
      { y: 700, opacity: 0
      },
      "+=1.5"
    ).to(
      previous,
      { y: -20, opacity: 0
      },
      "<"
    );
  }
});

 

[Rodrigo]

The logic for the text elements seems to be working as expected in my demo, here is a fork without ScrollTrigger, just a timeline that runs endlessly and loops back and forth just to show that:

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

 

The whole idea with that loop is to add animations to the timeline for every element except the first one:

d1sections.forEach((section, i) => {
  const previous = d1sections[i - 1];
  if (previous) {
    tl.from(
      section,
      { y: 700, opacity: 0
      },
      "+=1.5"
    ).to(
      previous,
      { y: -20, opacity: 0
      },
      "<"
    );
  }
});

This is the same codepen with the ScrollTrigger configuration in it:

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

 

That does what you said you need, have the first one visible, fade out/in the current and next and leave the final visible. The tricky part here is tie everything to the videos. This fork of the last codepen seems to use the onEnter  and onEnterBack callbacks correctly to play/reverse the videos (open it in a new window and check devtools for the logs in the console as you scroll):

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

 

Is important to note that I created the ScrollTrigger instances for the videos before creating the ScrollTrigger that pins the content in order to avoid issues with the calculations ScrollTrigger needs to make. Hopefully that will give you a good starting point and help you understand the logic to do the rest of the things you want to.

 

Happy Tweening!

[Joseph L]

@Rodrigo - thanks a ton for the detailed response. The text scrolling definitely works better on your demos than mine. I will use this as a foundation on my next try.

 

Getting the video to synchronize correctly is the next step. I'll post back here if I find the right solution.

 

Take care,

Joseph