Create fast click animation

[DigitalDude]

I am about 10 hours new to gsap and what I am trying to accomplish is this transition effect https://enterthearena.digitalsurgeons.com

when scrolling or clicking but I am unsure how to go about it, I have research fast click function and come up with very little examples or information. all sections with have a full screen bg image not sure if I need to accomplish this in css or can i create it in gsap ?

 

See the Pen aKZbeM by digitaldude (@digitaldude) on CodePen

[Acccent]

Hi!

 

Well, if you open the inspector on the website you linked, you can get an idea of what they're doing. On each scroll/click, they're actually completely removing the current image (ie. getting rid of a node), and replacing it with a new one which contains the new image. That new image's opacity and scale animate, so that it fades in and either slightly shrinks or grows depending on the scroll direction.

 

That's not necessarily the only way to do this though. You could have all the images except the first one invisible by default (with display: none), and then on scroll you make the current one invisible and use autoAlpha to animate the new one into view. Does that make sense?

[Acccent]

Here's a fork of your pen, I marked the changes in the CSS and JS with "CHANGES HERE". The scale is always animating up, but it should be enough to get you started.

 

See the Pen pKbvOG?editors=0010 by Acccent (@Acccent) on CodePen

 

[Acccent]

I only changed the animation and didn't look at the rest of the code, as there's a lot of it. The problem must be coming from somewhere else! If you could make a more reduced test case that would make it easier for us to help you out