Jump to content


Don't play a scrolltrigger animation until user has scrolled for the first time

Go to solution Solved by mvaneijgen,

Recommended Posts

I think there are probably a lot of different ways to solve this, so i might be barking up the wrong tree. But writing out what I want to achieve often helps with problem solving, so here i go!


I need to create a website where the main content area is enclosed in a 'card' looking block. When the user loads the page, the <main> will be a little bit faded and a little bit shrunk, so the bg colour is visible to either side of the block. Here's what should happen:


  • Once the user scrolls, assuming the <main> is visible on screen, it will animate to opacity 1 and scale 1
  • Once the user scrolls to the footer, the <main> animates back to opacity .9 and space .9.
  • These reverse as appropriate.


So I've got the <main> itself triggering the animations when it appears at the appropriate places on screen. This is super simple and works well!


However, the thing I am stuck on is what's bolded above - only animate <main> to opacity 1 and scale 1 once the user scrolls down. that is, the designer doesn't want the page to load in and have the animation instantly initialise. Currently, as in my codepen, the animation somtimes initially triggers even if I haven't scrolled (this obviously depends on the viewport size).


I'm sure I could write some kind of vanilla JS to check for window.scroll and then only set up the scrolltrigger stuff when that's done, but it feels janky, like there must be a cleaner way to manage this in GSAP itself? Or maybe a different way to solve the problem altogether that I'm not seeing?

Appreciate any help!

See the Pen VwdZQMr by cselin (@cselin) on CodePen

Link to comment
Share on other sites

  • Solution

First of I would never animate the trigger element, right now it's working, but it's smart to get in the habit of triggering a parent element.


You can set the top of the trigger dynamically, so what I would do is set the browser trigger to the same height as the .trigger element starting position. Then as soon as the user scrolls the animation will start. You could also subtract a few pixels of that value so the user has to scroll a bit before it starts, but that is something you'll have to test to see what feels right. 


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

  • Like 4
Link to comment
Share on other sites

Thank you, that works perfectly! 


And I appreciate the tip about using a parent, that does make sense especially since the perceived top and bottom points of this element are changing position, i can see that as an easy thing to get myself tripped up on in future. 

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.