Jump to content
GreenSock

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

Start the animations when the <div> is visible

Recommended Posts

Hi.

 

I'm starting to use this incredible code to have some ads in my page. The issue I'm having is that some banners are located in the middle of the page, so when the user get to that part the animation has already ended.

 

To fix this I'd like to know:

- how to start the animation when the <div> section of the banner becomes visible.

- If is possible to loop a serie of tweens without timelinelite.

 

Thanks!

 

Link to comment
Share on other sites

If already using jQuery, I would use the Waypoints plugin to detect when your div is in the viewport. If not, you could use something like this

 

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

 

As for repeats outside of TweenMax and TimelineMax: http://greensock.com/forums/topic/7514-about-more-features-like-repeat/

  • Like 2
Link to comment
Share on other sites

The suggestions above are excellent. We don't currently have this scroll position detection built into GSAP.

 

However, if this is for an ad, chances are it will be served in an <iframe>, and if so, I'm no so sure how those scripts would work (never tried).

 

If you are serving your ad through DoubleClick, their Enabler script has this functionality built in via a VISIBLE event that fires when the ad comes into view and then you can call whatever function you want to kick off the animation

 

https://www.google.com/doubleclick/studio/docs/sdk/html5/en/class_studio_Enabler.html

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