Jump to content
Search Community

jquery trigger GSAP function if element is in viewport

DD77 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

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/

  • Like 1
Link to comment
Share on other sites

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

 

 

  • Like 2
Link to comment
Share on other sites

  • 5 weeks later...
  • 9 months later...

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!! 

Link to comment
Share on other sites

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

 

 

 

 

  • Like 5
Link to comment
Share on other sites

@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 :) 

 

Link to comment
Share on other sites

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

 

 

  • Like 3
Link to comment
Share on other sites

  • 5 months later...

@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



 

Link to comment
Share on other sites

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

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