Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
lklio

Wait animation complete before scroll to next section

Go to solution Solved by akapowl,

Recommended Posts

Hey guys,

as you can see from Codepen I have some pinned sections managed with ScrollTrigger.

 

However, I would like to wait for the animation on the image (clipPath) to complete before I can scroll to the second section.

 

Can anyone help me figure out how to do it?

 

Another thing, which is the best scrolling Event to update a counter that show the current "slide"? (like 1/4, 2/4, 3/4, ...)

 

Thank you

See the Pen KKMQxYR by billmn (@billmn) on CodePen

Link to post
Share on other sites

 

Hey @lklio

 

Here's how you could do it, without having to make any changes to your HTML/CSS setup:

 

 

 

1) Differentiate between allSections, firstSection and otherSections (meaning other than first)

 

2) For the firstSection, split your one ScrollTrigger for the image-animation and pinning into two seperate ScrollTriggers, each handling one part. The first one, handling the animation, runs shorter than the other one for the pinning - the later one has to run longer, so it makes the sliding-in-over of the next section possible, when your animation of the image has already finished.

 

3) Set each of your other sections down on thy y-axis 100% initially ( to make sure, the second section won't come scrolling into view, when your first section is still animating - and keep the ScrollTrigger for them as you had it setup for each section in your pen.

 

That was the 'waiting for the animation to finish' part.

 

4) For updating the current slide ( as you can see in the console, when you fork the pen below and look at it in debug view ), I would suggest, you set up yet some more ScrollTriggers, but this time for each single one of the sections, with which in the callbacks you can update the current slide in whatever function you want it to - in my example, I used the onEnter and the onLeaveBack with the start of the trigger set to when the top of the section enters/leaves the bottom of the window.

 

 

See the Pen ZEOrqWw by akapowl (@akapowl) on CodePen

 

 

I might be overcomplicating things - but I couldn't see any other way, without making changes to your HTML/CSS setup.

Hope this helps, makes sense to you, or at least inspires you on how to handle things.

 

Cheers,

Paul

 

  • Like 3
Link to post
Share on other sites

Wow, thank you very much for your solution! it works very well!

Link to post
Share on other sites

Hey @akapowl, I notice now that:

 

gsap.set(section, {
    yPercent: 100
})

Doesn't allow a user to click on an element inside a slide (like a video) because is 100% translated on the y-axis.

 

Try this Codepen that include a video, you can't click on video controls: 

See the Pen mdExXEr by billmn (@billmn) on CodePen

 

Thoughts on how to solve this?

(HTML can be changed if can help)

 

Thank you!

Link to post
Share on other sites

 

Instead of setting each section down individually, you could also wrap all but the first section in a wrapper-div, and just move that wrapper-div downwards.

 

Doing so by setting a margin-top to that wrapper in your CSS seems to work fine.

 

See the Pen zYBWRNQ by akapowl (@akapowl) on CodePen

  • Like 2
Link to post
Share on other sites

Sorry @akapowl but I notice a strange thing ... any idea on why if you click on the Fullscreen video control the video opens in fullscreen and come back immediately?

 

Removing this code, the video opens in fullscreen correctly:

 

otherSections.forEach((section, index) => {    
  tl.to(section, {
    scrollTrigger: {
      trigger: section,
      pin: true,
      pinSpacing: false,
    },
  })
})

 

Link to post
Share on other sites

 

It seems to be related to the pinning indeed, but I can't tell you anything else than that.

 

Maybe @GreenSock or @ZachSaucier can shed some light.

Link to post
Share on other sites

I think the fullscreen API closes fullscreen mode when the DOM changes in some circumstances. Not sure what causes that or how to work around it in this circumstance.

 

If you figure out GSAP/ScrollTrigger is doing something it can improve upon, @lklio, please let us know. Or even if you figure out what exactly causes the un-fullscreen. But it's not a common enough scenario for us to try and figure out a workaround right now.

Link to post
Share on other sites

Hi guys and thank you for your support.

 

To workaround this issue, I have tried to move the <video> node outside the "project-section" managed by GSAP clicking on a button that will replace the native controls of the video.

 

Now the player stays fullscreen but, when I go out,  the timeline scroll to the next section (probably because of snap).

 

See the Pen GRqdGGr by billmn (@billmn) on CodePen

 

Does exists a way to prevent this?

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

×