jquery trigger GSAP function if element is in viewport

[OSUblake 9,990 Likes (Superhero)]

And an interesting thing about parallax is that it can kind of be done using only CSS.

 

See the Pen JycFw by keithclark (@keithclark) on CodePen

 

But it might require a little JS to make it work across every browser.

https://developers.google.com/web/updates/2016/12/performant-parallaxing

 

Demo from that article...

https://googlechromelabs.github.io/ui-element-samples/parallax/

[rgfx 35 Likes (Newbie)]

Nice, Thanks Blake

 

Setting visibility with elements that are not in view is a really good idea. Doing parallax images in only half of my battle. IE still doesn't like that method either, think am going to have to use the progressive enchantment spell.  (∩｀-´)⊃━☆ﾟ.*･｡ﾟ

 

See the Pen rpNpag?editors=0010 by rgfx (@rgfx) on CodePen

 

 

[rgfx 35 Likes (Newbie)]

Hi, I re-found this library that was recently revamped and it appears to work in IE using intersect observer... 

 

demo: https://russellgoldenberg.github.io/scrollama/basic/
repo: https://github.com/russellgoldenberg/scrollama
info: https://pudding.cool/process/introducing-scrollama/

 

 

[Robbert89 1 Likes (Newbie)]

Reading this thread i found out that scrollmagic is back alive!! 
 

Quote

After quite some time of neglect, development on ScrollMagic will finally resume this year. (hurray!) The goal is to make it stable and put enough security checks in to open it up more to public contribution.

https://github.com/janpaepke/ScrollMagic
This day is a happy day for me haha

 

@OSUblake did you ever consider publishing a tutorial on udemy about the Intersection Observer API and using it with GSAP?
I would be the first to buy!! 

[OSUblake 9,990 Likes (Superhero)]

19 hours ago, Robbert89 said:

 did you ever consider publishing a tutorial on udemy about the Intersection Observer API and using it with GSAP?
I would be the first to buy!! 

 

 

I've really never looked at Udemy. Is that where you go to learn stuff?

 

I don't think a lot of people know about the Intersection Observer. I've been using it mostly to show, hide, and lazy load stuff, but here's a fun animation for you. It looks better if you open it up on CodePen.

 

See the Pen WaLjNL by osublake (@osublake) on CodePen

 

 

 

 

[Robbert89 1 Likes (Newbie)]

@OSUblake Nice work there with the Intersection Observer! Ahh oke! Yess, most of the times if i want to learn something about a specific topic, i check Udemy if they have any courses. Some instructors there are really great and explain "the why" behind what they are teaching. Ive done some flexbox courses, javascript and also a GSAP course. I also really like the youtube video's from @Carl, very well explained and built up logically, which gives me a deeper understanding off the "things behind the scene". 

I Think the Intersection Observer is great to use in many websites, but i really dont know anything about it. In most cases i prefer subtile animations when scrolling elements into the viewport and revert those animations when scrolling back, some time a pin and thats all... 
 

I can see the browser support for Intersection Observer is getting better, but it's not widely supported yet. 
What do you think about the browser support and how do you resolve such things when using the Intersection Observer? 
 

I will dive deeper into this by searching around, if you got any suggestions(articles, video's, etc...) they are very welcome  

 

[OSUblake 9,990 Likes (Superhero)]

I haven't had any trouble with the polyfill.

https://github.com/w3c/IntersectionObserver/tree/master/polyfill

 

I just ran this Internet Explorer with no issues. Well, I had to change like one line of code because IE doesn't support CSS vars.

https://s.codepen.io/osublake/debug/6fd214ecd74e7091ec7b609bb0270f97

 

See the Pen 6fd214ecd74e7091ec7b609bb0270f97 by osublake (@osublake) on CodePen

 

 

[Robbert89 1 Likes (Newbie)]

@OSUblake Nice work! 
Unfortunately I havent had time before to play around with this.
Today i have and I played around with the Intersection Observer.
One thing i don't get is, how would i bind the tresholds to the progress() function in gsap?

I made a simple codepen where i console.log the tresholds retrieved from the intersection observer.
Then, when i create a timeline, i want to be able to return the tresholds and push them into the progress() function so my timeline will be controlled by scrolling... just like scrollmagic 

This should be quite easy, right?

Reading around i found @PointC 's example, but i didn't figure it out yet.... 

 

https://s.codepen.io/Robbert89/debug/MRembg/nqMwvGERWbek

 

[mikel 1,823 Likes (Superhero)]

Hi @Robbert89

 

I am not clear what should be observed in your pen and what should be animated.

So here's a simple, neutral example:

 

See the Pen axZMEY by mikeK (@mikeK) on CodePen

 

Happy observing and tweening ...

Mikel

 

 

[Robbert89 1 Likes (Newbie)]

Hi @mikel

 

That's exactly what i was looking for  thank you!!!! 

In my codepen, i was actually only logging the returned tresholds.
If you open up the console you can see the returned entry.intersectionRatio value's. 
 

If i may, one more question... 
I tested the timeline progress and it works great,  except on mobile safari (only tested on mobile safari).
I use the Intersection Observer polyfill so things do work, but the animation is very (jumpy/laggy).
Any ideas on how this could happen?

Your example is updating the timeline on every 0.01 (or something close since Intersection Observer is not logging exactly 0.01, 0.02, 0.03 etc...) so i'd expect smooth animations, just like i see on desktop. 

-Robbert

[mikel 1,823 Likes (Superhero)]

Hi @Robbert89,

 

That may be an issue: Polyfill not working on iOS

 

Best regards

Mikel

 

 

[Robbert89 1 Likes (Newbie)]

Ahh, that's a pity...

For now, i wil animate only on enter and exit since it seems to work fine.
Will dive deeper into this when i got the time

 

Again, many thanks for helping me out! 

 

Kind regards,

 

Robbert