ScrollTrigger + Scrub + Clip-Path Flicker When Scroll Back

[m4g1c14n]

The codepen I have is a very very simple example, to showcase this problem.

 

The easiest way to see the flicker :

1. click the content area of the codepen result

2. press & release quickly the arrow down on the keyboard once to reveal the first content ( ONE Red ), it will snap to the next label "holdEnd"

3. after animation finish, press & release quickly the arrow down again to reveal the 2nd content ( TWO Green )

4. after animation finish, press & release quickly the arrow down again to reveal the 3rd content ( THREE Blue )

 

So far, no flicker, continue with the next step to see the flicker of the content behind showing up in split second 

5. after animation finish, press & release quickly the arrow up once, it will animate back and reveal the 2nd content ( TWO Green ), but even before the 3rd content is hidden, we can see a flicker of 2nd content very briefly

6. after animation finish, press & release quickly the arrow up once more, it will animate back and reveal the 1st content ( ONE Red ), but even before the 2nd content is hidden, we can see a flicker of 1st content very briefly

 

Flicker will not happen :

a. if we are snapping forward

b. if we are scrubbing without releasing the scrub

 

Flicker will only happen if we are snapping backwards, no matter ( from scroll wheel, key up, scrub the scroll up and release the mouse press )

 

What should I do? our new site uses scrollTrigger with scrub and clip-path in all of the pages ( including the simple Blog Detail page )

 

Please help

 

 

See the Pen bGZboVg by m4g1c14n (@m4g1c14n) on CodePen

[akapowl]

 

Hello @m4g1c14n

I've tinkered a bit with your demo, and it might be more of a general issue with numeric scrub values in combination with snapping - not just limited to clipPaths. Here is a demo minimized down even further.

The 'odd' behaviour seems to have been introduced with version 3.12.3.

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

Before (version 3.12.2 here) there was no flickering.

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

 

I'm sure @GreenSock will have a look into this as soon as he finds the time.

In the meantime you could either try moving down to version 3.12.2 for now, or alternatively set things up with a scrub of true instead of your numeric scrub; since the scroll on your example is being smoothed already anyway.



Steps to reproduce:

Scroll down past or into the gray section - scroll back up and stop scrolling to let it snap.
 

 

 

[GreenSock]

Sorry about that regression, and thanks for creating that minimal demo! Super helpful. It should be resolved in the next release which you can preview at: 

https://assets.codepen.io/16327/ScrollTrigger.min.js (you may need to clear your cache)

 

Better? 

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

 

For the record, the problem was that it was setting the destination progress value of the animation as soon as the snap finished rather than waiting for the scrub to finish as well. That was part of a solution implemented in 3.12.3 related to ensuring that the final value was EXACTLY what was snapped to even if it was impossible to land there due to the browser's scroll position being limited to whole pixel values. 

[m4g1c14n]

@akapowl

Wow, indeed, after I set the scrub to true instead of 1, it works, thanks a lot for your help

 

@GreenSock

I saw the preview release said 3.12.5 , so when the 3.12.5 is available will it be a blog post? or it will be 3.13 release instead?

 

[m4g1c14n]

Oh one more question

 

in my example, the first content will start scrolling up, when the second content start animating, if i want to make the first content stay in its place what should I do?

 

Lets say first content will only start scrolling up AFTER the third content is animating , the reason is this time I want to clip-path from the right side , and it will look ugly if the content below it start scrolling 

 

Check this pen 

See the Pen poYzXWB by m4g1c14n (@m4g1c14n) on CodePen

 

Setting the end with huge number wont work, because that would make the animation inside unscrubable ( because the animation of text fading in wont finish animating at all )

[mvaneijgen]

Check out the following topic. The logic will probably also apply to your setup and can probably simplify your code a bit. 

 

 

[m4g1c14n]

Thank you @mvaneijgen 

The link in your example did not show how the ScrollTrigger + Scrub + Pin for the animation inside the card ( only the process of showing the card ), I also saw the codepen example "Card Move in Effect v2"

and also 

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

 

Imagine that each card is a full width / height page, when each card is "pinned" , it will start animating the content inside ( which contains many type of animations that can be scrubbed from the start -> end of the pinning scrubbable )

 

I also understand that if I add the pin-spacing, I will allow the scroll naturally reveal the next card below , and when the next card is pinned, it can show the animation, but I wont be using pin-spacing, because I want to control the revealing of next card ( from simple example I have, I am using clip-path to reveal the next card , but there are many ways to show the next card )

 

Trully from the codepen I shared ( the one, two, three, four revealed using clip-path from right ), if I can make the pinned content below not scrolling up  after the end of the pin

 

Check the video below, this is a work in progress for my site , as you can see there are many "cards" 

When a card is pinned, the first animation is to reveal itself ( hence closing the card before ), and then reveal all the content inside, and snap at the end label, if the user scroll down just a little bit will trigger the next card pin, and repeat the process ( but the animation inside is widely different )

 

Imagine that on each page of my site, there are page that have 5 cards, there are page that have 3 cards, there are page that have 10 cards, the easiest for me in term of HTML and CSS, is simply without animation make each card 100vw, 100vh , and make sure that the content of each card is designed perfectly for various display size, and after that , simply use the scrollTrigger + pin + scrub, to perform every single animation, this workflow is very simple , there is only one problem that the card at the end of the pin will start scrolling up naturally ( which is actually okay if I use the clip-path reveal from below, but I wish to utilize various kind of revealing animation, such as staircase clip-path reveal, circle reveal, clip-path from the right left or top reveal )

 

 

2023-12-22 10-28-39.mkv

[mvaneijgen]

The thing that you have to keep in mind is "all ScrollTrigger is doing is animating your animation on scroll". So before doing anything focus on the animation you want to happen and then I think the solution provided in the post is the most easy solution with the least obstacles. 

 

Here is an example with every card having its own animation. You can make this as elaborate as you want, but the key is that before you do anything remove ScrollTrigger! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Hope it helps and happy tweening! 

 

See the Pen abMbwYd?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[m4g1c14n]

@mvaneijgen thank you for the recommendation, so put everything on 1 timeline and 1 scrollTrigger, I think that is definitely doable but a little bit scary, because it makes thing a little bit complicated, because we do have certain configuration different for each section , such as snap speed, and not to mention each section is now glued , we cannot move the sequence of section reveal without editting the animation script, we also cannot easily copy paste a section to other page ( by having each section their own timeline and scrolltrigger, we can easily just copy paste the HTML CSS and the timeline script for that section and put it on any other page easily ), etc

 

So far here is our workflow, which is in our opinion is quite simple

 

Step 1 : Our web designer will create the HTML + CSS design, we will check if all the content is displayed properly on various display, when everything is perfect, we can proceed with the animation 

See the Pen abMbRpa by m4g1c14n (@m4g1c14n) on CodePen

 

Step 2 : for each individual section that need to be animated ( for this example all will need to be animated, but perhaps on same page there will be some section which not need to be animated ) , we use the scrollTrigger with pin and pinspacing to animate everything

Each section has their own Timeline and their own ScrollTrigger, everything so far is perfect, we love the workflow, we can individually change the scrub speed, snap speed, we can individually check each timeline with their markers, we also can copy this section's html css and timeline into any other page on the website , and everything will work perfectly , we love this capability 

See the Pen rNRNqyd by m4g1c14n (@m4g1c14n) on CodePen

 

 

Step 3 : Now , all is perfect so far , we love everything , now we want to make them overlap, so that we can further control the reveal animation, we do understand to do this, a simple removal of Pin Spacing will solve the problem , and there are no problem if the only reveal animation we use is the Clip-Path from the bottom

( I could not attached the codepen i dont know why  , check the codepen at the start of this thread )

 

 

Problem : Thing become somewhat not good if we are revealing the next section using clip-path from the right side ( on this code pen example )

See the Pen poYzXWB by m4g1c14n (@m4g1c14n) on CodePen

 

So my question remain, on the last Pen, can we do the clip-path reveal without having the last section pinned scrolling up ( because it has reach the end ), is there anyway to make the content continue pinning after it has been pinned ( I was thinking maybe using onLeave to fixed the last section, and then onLeaveBack to return them to the flow of document, is there any other idea? ) , if this is not possible, just tell me this is not possible so that I can workaround it some othe way ( maybe by forcing to reveal the animation using clip-path from the bottom for all section )

 

Again, I do understand your recommendation, which is to join everything into 1 timeline and control them using 1 scrollTrigger , we kind of not like the workflow , because using the individual timeline and scrolltrigger like what we have right now, the designer can move the section , and everything will work as perfectly without ever needing to touch the animation script ( for example section one, two, three, four , the designer change their mind and want to re-arrange into three,two,four,one , they can just move their HTML Code , without even needing to touch the CSS and or scripts )

 

[Rodrigo]

Hi @m4g1c14n,

 

I've read this thread a few times and I'm still not clear on what exactly you're trying to achieve. I don't know if this demo might help:

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

 

If not, please be specific about what you're trying to do in simple terms (avoid long convoluted explanations) and if possible add a link of a demo or website that works in the way you intend.

 

Happy Tweening!

[m4g1c14n]

Hi @Rodrigo, Merry Christmas!

 

I wish to have a pinned scrollTrigger, remain pinned even after it has finished scrubbing the content ( after the end has been reached ) , I have tried using onLeave ( change the container into fixed, and onLeaveBack change it back to relative, but it is not working )

 

Check the codepen below , when Content TWO is animating in ( clip-path animation reveal from the right side ) , I want the Content ONE which has finished animating , stay pinned and not scrolling up. 

 

Codepen 

See the Pen poYzXWB by m4g1c14n (@m4g1c14n) on CodePen

 

There are sections ( contentX ) on the codepen, EACH Section will have their own Timeline, and their own scrollTrigger

I dont want to have 1 timeline for all contents

[Rodrigo]

Hi,

 

Maybe something like this?

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

 

Mostly this is about playing with the end value in your ScrollTrigger configuration and perhaps using pinSpacing: true in the final element in order have enough scrolling to show that last element correctly, like this:

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

 

Hopefully this helps.

Happy Tweening!

[m4g1c14n]

@Rodrigo , Ahh very clever, so we can adjust animation the end to 120% , in which case the when end is above 100% , the next content should be animating in , and the old content is not yet finished animating ( still have another 20% scroll up left )....

Yes this is actually a perfect solution

 

PS : Setting end to max does not suit my needs though, because the animation inside is scrubbed, and at the moment the second content is coming , the first content has not finished animating ( setting to 120% or 110% is perfect though , I can now try to find the sweet spot for my animation )

 

Thanks a lot