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(

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 i

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 somethin

@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? Readi

@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 do

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 module