Jump to content
Search Community

Trigger animation on view

sorciereus test
Moderator Tag

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

Ah, ok. Well, that's now more of a ScrollMagic question rather than GSAP. I am not sure as I don't have experience with it but, in general, what you have to do is work out where the element is in the page and calculate how much scrolling needs to happen before it's viewable.

 

Here's a stackoverflow topic giving you details on the matter:

 

http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433

 

Hope it helps.

Link to comment
Share on other sites

Thanks OSUblake, Went through this and pulled Shaun's demo, 

See the Pen OXBpzg?editors=0010%C2%A0 by sgorneau (@sgorneau) on CodePen

 

Without knowing where on the page it will be trafficked (as it goes out all across the web) Does it account for any position on page? Just triggers when it enters viewport? 

Link to comment
Share on other sites

Using offsetTop like Shaun's demo may fail if there are any transforms affecting that element, either directly or from a parent element. Using getBoundingClientRect is the only way to really determine the position of an element. See the output in this demo. OffesetLeft/Top are reporting the box's position at 0,0 which it's obviously not. The getBoundingClientRect method factors in everything, including scale.

 

See the Pen 85e021b3614193158e4efad0c082443a?editors=0011 by osublake (@osublake) on CodePen

 

To get an accurate offset calculation, you can use this function, but as you can see, it's still using getBoundingClientRect.

var offsetTop = getOffset(myElement).top;

function getOffset(element) {
    
  var root = document.documentElement;
  var body = document.body;
  var rect = element.getBoundingClientRect();
  
  var scrollTop  = window.pageYOffset || root.scrollTop  || body.scrollTop  || 0;
  var scrollLeft = window.pageXOffset || root.scrollLeft || body.scrollLeft || 0;
  
  var clientTop  = root.clientTop  || body.clientTop  || 0;
  var clientLeft = root.clientLeft || body.clientLeft || 0;
    
  return {
    top: Math.round(rect.top + scrollTop - clientTop),
    left: Math.round(rect.left + scrollLeft - clientLeft)
  };
}

.

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