Jump to content


Do I need ScrollMagic to use GSAP?

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

Great demo Shaun! 



Once I have that, I will animate better than Looney Tunes and I will do it all with GSAP.  I will be heralded and win many prizes and do GSAP proud.


  :lol:  Love it!


Here's your guide to not using jQuery...



For element visibility, you can use element.getBoundingClientRect(). It returns the coordinates of the element relative to the screen, even if it's transformed.

var rect = myElement.getBoundingClientRect();
var vh = window.innerHeight;

if (rect.top >= 0 && rect.bottom <= vh) {
  // Fully visible

if (rect.top + rect.height >= 0 && rect.bottom - rect.height <= vh) {
  // Partially visible

Listening for "touchmove" and "scroll" events should fix the iOS problem. You need to be careful about how you do scroll events as they can be a performance killer. I would recommend using TweenLite.ticker to run the scroll event updates as it will throttle the calls.


Checking the visibility on 600 elements.

See the Pen 0d4742d2200d028ed42297cb874af2b5?editors=0010 by osublake (@osublake) on CodePen

  • Like 5
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.