Jump to content

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

Create fast click animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites



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?

  • Like 5
Link to comment
Share on other sites

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


  • Like 6
Link to comment
Share on other sites

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 :)

  • Like 3
Link to comment
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.