Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Trigger animation on view

Recommended Posts

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? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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:




Hope it helps.

Link to comment
Share on other sites

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.

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