Only animate elements visible in the viewport

[Perdixo75 0 Likes (Newbie)]

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 ? 

[akapowl 5,491 Likes (Superhero)]

 

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.

 

Edit:

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

 

[Perdixo75 0 Likes (Newbie)]

@akapowl thanks a lot, i've got my answers !