Jump to content
GreenSock

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

Trigger animation on view

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

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? 

Share this post


Link to post
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.

Share this post


Link to post
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. 

Share this post


Link to post
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:

 

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

 

Hope it helps.

Share this post


Link to post
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

Share this post


Link to post
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? 

Share this post


Link to post
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

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×