Robbert89

Thank you both for helping me Running: yarn cache clean indeed solved the problem, appreciatie it! Never knew this could be an issue when running .tgz from my local machine. But thinking about it, it makes sense since yarn stores every package in a global cache. Thanks for helping me out! Happy ScrollTriggering ? man... i love it!

Hi all, Couldnt find any info on it yet but when i install gsap with bonus files via: yarn add ./gsap-bonus.tgz The node_modules folder indeed gets all the files but it seems ScrollTrigger plugin is missing... Can you reproduce and confirm this?

It just keeps getting better ❤️ You are HERO'S! Thanks!

Off-topic: by reading this i realized i could this: - constructor.js file const animations = { caseOut: function(content, background){ let tl = new TimelineMax(); tl.to(content, 0.4, {y: -20, autoAlpha: 0, stagger: 0.05}) tl.to(background, 0.4, {width: '100%', height: '100vh'}) return tl; }, // Other animation functions here... }; module.exports = animations; - elsewhere.js file let done = this.async(); let tlControl = animations.caseOut(); tlControl.play().call(done); or if you want: tlControl.play().call(this.async()); I tried to async() with .then(), but that didn't work. Thanks @OSUblake i saw you posted an article somewhere about Promises, will find and read it

Hi Jack, Thanks for looking into this! Honestly i forgot about this post and ended up using a range slider. I did something like below and then animated based on the value. <input type="range" min="0" max="100" value="0" step="any"> That said, clever approach Jack! I will take the time to understand everything going on there ?. Thanks again, greatly appreciated!

Hello, Since today i started using ThrowProps and i really like it I started this topic because i would like to know more about how things work. In the codepen there is a simple range slider, which has a knob and a range. I tried to divide the snap points evenly so the knob will stop at 0%, 25%, 50%, 75% and 100%. This works, however.. when i resize the window it looses coordination and ThrowProps starts to snap on odd places. Is there a proper way to solve this with window.resize() function? Or is there something better i could do? Another thing i don't understand yet is this: i created an <ul> with five <li> items, so i could divide the items over 0%, 25%, 50%, 75% and 100% (same as snap points). I figured that then i can use them as indicators for the snapping points. display: flex; justify-content: space-between; But if you look closely you can see that each snapping point has more overlap compared to the dividers below. Am i taking the wrong approach on this, or am i just missing something (im fairly new to javascript and gsap). Would love to hear from you guys, how you would approach a simple case like this.

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

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

@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

@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

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

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.