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!

 

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

 

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

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

 

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

  • Like 2

Share this post


Link to post
Share on other sites

Nowadays, what library you recommend to trigger an animation when an element enters/exits the viewport?

Possibly optimized with Intersection Observer and not too complex. 

I'm trying https://github.com/stutrek/scrollmonitor but frankly it seems not working so well with GSAP, on mobile (iPhone) when fast scrolling it loses some animations...

Thanks

Share this post


Link to post
Share on other sites
15 hours ago, Black Ducas said:

trigger an animation when an element enters/exits the viewport? Possibly optimized with Intersection Observer and not too complex. 

 

Well as @PointC mentions above you can use ScrollMagic, he actually wrote a guest article (tutorial) on it which can be found here.

 

But ScrollMagic appears behind regarding support for IntersectionObserver and GSAP 3 as seen in these few examples.
https://github.com/janpaepke/ScrollMagic/pull/920 — GSAP 3
https://github.com/janpaepke/ScrollMagic/issues/918 — GSAP 3
https://github.com/janpaepke/ScrollMagic/issues/751 — IntersectionObserver

 

Alternatively there is scrollama which does use IntersectionObserver. It is quite similar to ScrollMagic and continues to recieve updates. I have not tested it yet with GSAP 3, so do let us know how that goes if you (or anyone else) do so.

 

I’m slightly surprised @GreenSock hasn’t just made one of his infamous and clever ’whipped up” helper functions leveraging IntersectionObserver for passing in GSAP timelines or tweens. So the staff can stop saying "ScrollMagic is not a GSAP product" here on the forum and that it might not be the best option (ha, ha), instead just point all references to that in house approach. ?

 

You can also simply use vanilla IntersectionObserver on your own without the need for a library, you will find plenty of examples here within the forum.

  • Like 4

Share this post


Link to post
Share on other sites

Hi @Shrug ¯\_(ツ)_/¯

thanks in advance for you answer. Some questions:

 

1) IntersectionObserver is more performant and precise than others like ScrollMonitor About precision: with ScrollMonitor (that doen't use IntersectionObserver) it seems that sometimes it loses elements in viewport when scrolling fast. About performance: I really don't know...

2) I already know ScrollMagic and it's awesome, especially with GSAP but I tend to see it for big and complex scrolling interactions. Is it appropriate for small/medium interactions? Ie. when a text appears in viewport animate it with various properties via GSAP3. 

 

Let me know

Thanks

 

Share this post


Link to post
Share on other sites
16 minutes ago, Black Ducas said:

1) IntersectionObserver is more performant and precise than others like ScrollMonitor About precision: with ScrollMonitor (that doen't use IntersectionObserver) it seems that sometimes it loses elements in viewport when scrolling fast. About performance: I really don't know...

2) I already know ScrollMagic and it's awesome, especially with GSAP but I tend to see it for big and complex scrolling interactions. Is it appropriate for small/medium interactions? Ie. when a text appears in viewport animate it with various properties via GSAP3. 

 

1) Use the intersection observer. It's a browser feature, not a library, so it performs better.

2) See #1

 

 

 

  • Like 3

Share this post


Link to post
Share on other sites
4 minutes ago, OSUblake said:

 

1) Use the intersection observer. It's a browser feature, not a library, so it performs better.

2) See #1

 

 

 

 

1) Ok, you know if is it well supported by all browser?

 

2) You mean that for simple/medium interactions you'd go with native IntersectionObserver without any libraries?

 

Thanks

 

Share this post


Link to post
Share on other sites
1 minute ago, Black Ducas said:

1) Ok, you know if is it well supported by all browser?

 

It works in all modern browsers.

https://caniuse.com/#feat=intersectionobserver

 

For those who think supporting IE is a good idea, there are polyfills.

https://github.com/w3c/IntersectionObserver

 

3 minutes ago, Black Ducas said:

2) You mean that for simple/medium interactions you'd go with native IntersectionObserver without any libraries?

 

Well this is a gsap forum, so I'm of course including gsap as a library. But you don't need any scrolling libraries when using the intersection observer. That kind of defeats the whole purpose.

 

  • Like 7

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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×