Jump to content
Search Community

Start the animations when the <div> is visible

jorge.yoma test
Moderator Tag

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

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

  • 4 years later...

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

Link to comment
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 5
Link to comment
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

 

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

 

Link to comment
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
Link to comment
Share on other sites

  • 10 months later...
On 12/23/2019 at 6:53 AM, Shrug ¯\_(ツ)_/¯ said:

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.

 

😅

 

Read this just now, and realised, the 'whipping together' of helper functions really seems to get out of hand sometimes and result in something like ScrollTrigger. I am still amazed, how awesome Greensock is. 💚

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

7 minutes ago, akapowl said:

Read this just now, and realised, the 'whipping together' of helper functions really seems to get out of hand sometimes and result in something like ScrollTrigger. I am still amazed, how awesome Greensock is. 💚

 

Ha. Thanks. Yeah, this is exactly what's happening now with the "FLIP" stuff. It starts with a little helper function to assist someone in a bind...then there are other cases that require further enhancing of that helper function...and then there's some pretty advanced stuff that could be quite useful, so it evolves into a plugin :)

 

  • Like 1
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.
×
×
  • Create New...