mirohristov

Sure thing. Here's a minimal pen. The overall height of the window expands as you scroll, so the anchor tag `#bottom` can't reach when using `scroll-behavior: smooth;`. I'm already using ScrollTrigger.refresh(); https://codepen.io/mirohristov/pen/dywxyby

Hi, I have the following project: https://old.dreamspace.co/projects/metatailor It all works well expect when trying clicking Plans & Pricing which uses scrollTo() an offset of scrollTop( el ) I'm adding .expand class on the 5 videos which changes the total window scroll height. As it's scrolling down the page becomes longer and the scroll never reaches the element. Is there a better way to accomplish this? I've looked into this pen below https://codepen.io/GreenSock/pen/NWLPYmJ but it seems overly complex and not exactly what I need. Thank you!

Jack you rock my brother! This worked like a charm! The reason I'm using jsdelivr is so that I can combine all the libs in one request. I just didn't know about using /dist instead of the module. All my scripts look like this now and it works great: <script src="//cdn.jsdelivr.net/combine/npm/jquery@3.5.1,npm/sammy@0.7.6,npm/animejs@3.2.0,npm/ion-sound@3.0.7,npm/pixi.js@5.3.3/dist/pixi.min.js,npm/pixi-filters@3.1.1/dist/pixi-filters.min.js,npm/gsap@3.5.1,npm/gsap@3.5.1/dist/PixiPlugin.min.js"></script> I tried using cdnjs.com to find the pixiPlugin there but was unable to find anything. Also, you may want to add the CDN link in the documentation here and explain the difference between module and non-module: https://greensock.com/docs/v3/Plugins/PixiPlugin It will make it easer for lost souls like myself Thanks a lot!

I'm trying to use the pixi plugin with gsap from jsdelivr or cloudflare CDN and I'm having a hard time getting it work. This is what I'm trying right now: https://jsfiddle.net/kwbu5g6r/ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.5.1/PixiPlugin.min.js"></script> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/PixiPlugin.min.js"></script>--> Doesn't work either In the first case, gsap loads but PixiPlugin results in Unexpected token 'export' In the second case even gsap doesn't load It worked just fine with TweenMax from jsdelivr but not when updating to gsap. Any ide what I'm doing wrong? Maybe I need a different lib. Also, how do I only use jsdelivr and not cloudflare? Thank you!

Thank you guys for the quick responses. @Dipscom, your solutions works like a charm. I didn't know you could add mini-timelines to a main one. Thank a lot! I got that from this tutorial on three.js and GSAP. @PointC, My bad. Your solution also works great! I just didn't notice you used the position in both lines. I had to change it to p.x and r.x tl.to( obj.position, dur, { x:keyframe.p.x*10, y:keyframe.p.y*10, ease:Sine.easeIn }, "label" + i ); tl.to( obj.rotation, dur, { x:keyframe.r.x, y:keyframe.r.y, ease:Sine.easeIn }, "label" + i ); I'll definitely look into labels. The more I learn about GSAP the more I love it Respect!

TweenMax doesn't allow you to tween 2 or more properties at once in Three.js on the same tween. For example you can't tween rotation and position at once. You can only tween the rotation in one tween or the position but not both. I've managed to do it by pushing 2 tweens in an array and calling tl.insertMultiple(array). Unfortunately, for some unknown to me reason, it only plays fine the first time. After restart(), the tween/timeline is broken/stutters/skips. Notice when the color changes to red it's no longer smooth animation. Any idea why it only works once and then 'crashes'? Or is there a better way of doing the tween all together?