Jump to content

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

Start the animations when the <div> is visible

Recommended Posts



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.




Share this post

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




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

  • Like 2

Share this post

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



  • Like 2

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.