Trigger animation on view

[sorciereus 5 Likes (Newbie)]

Hello. Been playing around with the ScrollMagic Tutorial but it's not giving me the results I want. Is there a simple method to trigger a GSAP animation sequence once the banner scrolls into the viewport? 

[Dipscom 2,815 Likes (Superhero)]

In any particular ad platform or just in general?

 

If we're talking about banner ads here, it will depend on the ad platform you're working with as they will have their own methods.

[sorciereus 5 Likes (Newbie)]

This would just be in general. So for instance I have a series of TweenMax or TimelineMax tweens that I'd like to trigger when the ad enters viewpoint. This is not rich media and is being served as HTML5 into publisher's sites. 

[Dipscom 2,815 Likes (Superhero)]

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.

[Dipscom 2,815 Likes (Superhero)]

Right, it's not that hard, actually. Here's a crude implementation:

 

See the Pen ENgvRw by dipscom (@dipscom) on CodePen

 

I have no idea how robust this is given my lack of experience with ScrollMagic but It seems to work fine for me here.

[OSUblake 9,990 Likes (Superhero)]

Or without any magic scrolling...

http://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/?p=63860

http://greensock.com/forums/topic/14912-parallax-scrolling-sections/?p=64129

[sorciereus 5 Likes (Newbie)]

Or without any magic scrolling...

http://greensock.com/forums/topic/14870-do-i-need-scrollmagic-to-use-gsap/?p=63860

http://greensock.com/forums/topic/14912-parallax-scrolling-sections/?p=64129

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? 

[OSUblake 9,990 Likes (Superhero)]

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)
  };
}

.