Jump to content
Search Community

Only animate elements visible in the viewport

Perdixo75 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

I've been using GSAP for a couple of month now and i really really enjoy it! Right now, i'm working on my portfolio using Barba.js for page transitions. I have a little question that might sound weird for a non-beginner but here it is :


Let's say i have a long page with a lot of content. How do you animate only the elements that are visible in the viewport when leaving the page ? 

Link to comment
Share on other sites

  • Perdixo75 changed the title to Only animate elements visible in the viewport
  • Solution


Hey @Perdixo75


That is really more of a general JS and barba-related question and usually these forums try to stay focussed on things that are directly related to GSAP.


What you would have to do before animating is checking for which of the elements that you want to animate are in view currently - for example with a helper function similar to the one explained here


That could then look something like this


See the Pen 5d29bd576ad634a694103346560caf3c by akapowl (@akapowl) on CodePen



Of course you would have to tweek it to your liking, because as of now it will only trigger on elements that are completely in view.


If you have any other questions directly related to GSAP, we'll be happy to help.


Happy tweening.



Of course you could also utilize GSAP's ScrollTrigger to handle the in-view-checking like maybe so


See the Pen 6158772cb43f78df7bc8c2fbcdfa83cf by akapowl (@akapowl) on CodePen


  • Like 1
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.
  • Create New...