Creating Jumpscare

[Boreas]

Hey guys, 

I am trying to create a jumpscare moment for my webpage. It works fine when while scrolling slowly but couldnt make it work when scrolling fast.  Is there any solution to this? 

Thank you.

See the Pen QWYBNpV by Boreas09 (@Boreas09) on CodePen

[mvaneijgen]

Hi @Boreas welcome to the forum!

 

Great demo thanks for that!

 

I would set it up a bit differently. I've placed some comments through out the code to better explain my self, be sure to read through them. I would just tween the opacity of the element, but give it an ease that instantly does its thing. I've used the steps ease and if you give it "steps(1)" it will instantly jump form 0% to 100%,  check out all the eases for more info https://gsap.com/docs/v3/Eases/

 

GSAP and ScrollTrigger are separate plugins, GSAP tweens things and ScrollTrigger can take these tweens and hook them up to the scrollbar. Personally to make it easier to understand an read I like to split these two plugins and use a timeline for all my animations, so that is what I've done in the code below. I've created a timeline and add ScrollTrigger to that timeline and ave all the animations (in this case just one) as a tween to that timeline. Your approach is certainly not wrong, but it will make it harder to see what properties are part of what and in your case you had created a duration and ease property to the ScrollTrigger object, but ScrollTrigger doesn't have these properties, but a tween does!

 

If you have any further questions, let us know! Hope it helps and happy tweening! 

 

See the Pen ExrpgYL by mvaneijgen (@mvaneijgen) on CodePen

[Boreas]

Hey @mvaneijgen thank you for answering. 

I will definitely separate GSAP and Scrolltrigger to understand more but my problem is still stays with your demo. It needs to go back to black screen after jumpscared(blue screen) so blue screen should be visible only between start and end position. With my normal scrolling speed i cant see blue screen i need to scroll little bit slower to see it. Increasing distance between start and end maybe solve it but it will be too long to see blue screen for slow scrollers. Couldnt figure out what to do. 

Thanks for helping me.

[mvaneijgen]

Oh, that wasn't clear from your first description. Then is a timeline even a better idea. I would create the animation you want to happen on the timeline and then just restart the timeline every time someone enters the ScrollTrigger.

 

I've removed all the comments and placed new once. The start animation is still the same, it animates from 0 to 1 with no ease, then the timeline does nothing for 1 second (change this to how long you want to see it) and then it animates to 0 again. The ScrollTrigger plays this animation when the ScrollTrigger start triggers meet (the green once), the end triggers will do absolutely nothing in this example (the red once), so ignore those.

 

Hope it helps and happy tweening! 

 

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

[Boreas]

Thank you this method solved my problem.