Jump to content

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


  • Posts

  • Joined

  • Last visited

About Robbert89

Robbert89's Achievements


Newbie (1/14)



  1. 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
  2. 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
  3. @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
  4. @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
  5. Reading this thread i found out that scrollmagic is back alive!! 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!!
  6. Maybe you can prevent this by using the imports loader. The imports loader allows you to use modules that depend on specific global variables. In your project install the imports-loader (yarn is used in this example) yarn add imports-loader once this is installed you can import the drawSVGPlugin import 'imports-loader?define=>false!gsap/uncompressed/plugins/DrawSVGPlugin'; check if you have the correct path... in my case the path is gsap/uncompressed/plugins because i downloaded the files from Greensock and putted the map directly into my node modules. Thought it might be helpfull for anyone who runs into this.