mikel

I have the Google Black Card ...

Hey @sumith, One of my favorite magazines TheNewYorker uses this technique and has kindly provided the code on Github: uturn - detect scrolling behavior with a requestAnimationFrame debounce Happy debounced scrolling ... Mikel

Hey, These two pens of Jack and Blake . of Jack and of Blake brought me to the following solution - but with a simple polyline: https://codepen.io/mikeK/pen/bGbBXOO

Hey @knalle, I am not sure what you want to achieve exactly: that follows the vertices of the SVG path. If the distances are the same, then there is the possibility to operate with stroke-dasharray . https://codepen.io/mikeK/pen/rNBWwjZ Or hand coded ... https://codepen.io/mikeK/pen/ydppYJ Happy tweening ... Mikel

Hey @31its, Welcome to the GreenSock Forum. Where there is a will, there is a way. Many things are possible ... Here's a little gimmick with GreenSock drawSVG. https://codepen.io/mikeK/pen/aboBWNL If it is not a simple path, you can work with masks. More info here: svg gotchas Happy tweening ... Mikel

Hey @mvaneijgen, from the docs So TweenLite.to("#path", 1, {drawSVG:"20% 80%"}) animates it from wherever the stroke is currently to a state where the stroke exists between the 20% and 80% positions along the path. It does NOTanimate it from 20% to 80% over the course of the tween. This is a GOOD thing because it gives you much more flexibility. You're not limited to starting out at a single point along the path and animating in one direction only. You control the whole segment (starting and ending positions). So you could even animate a dash from one end of the path to the other, never changing size, like TweenLite.fromTo("#path", 1, {drawSVG:"0 5%"}, {drawSVG:"95% 100%"}); That's the secret of {draw:"100% 100%}. Happy drawing ... Mikel

@mvaneijgen, @PointC is our SVG guru and his hint: Regarding your <path> direction problem: Quick tip: when you create your path, place a temporary arrowhead on the beginning of it via the stroke panel in your vector software. If the direction is incorrect, you can easily reverse it. In Adobe Illustrator you do that by the menu Object --> Path --> Reverse Path Direction. Once it's going in the desired direction, simply remove the arrowhead and export. Maybe this pen (check the different 'starting points) is helpful https://codepen.io/mikeK/pen/mdbryWK Happy tweening ... Mikel

Hey @iFocus, Welcome to the GreenSock Forum. How to Create a Sticky Image Effect with Three.js Happy tweening ... Mikel

Hey @OSUblake, I would have bet you would recommend a little canvas and three.js. https://codepen.io/mikeK/pen/YzKWVzg OK: raycaster and hover is not my level! I just start to play a little. Happy tweening ... Mikel

Hey @sumith, Some pointers: //create a timeline instance var tl = new TimelineMax() //the following two lines do the SAME thing: .add( TweenMax.to("#id", 2, {x:100}) ); .to("#id", 2, {x:100}); //shorter syntax! By default, animations are inserted one-after-the-other, but it's easy to control precisely where things go using the position-parameter. I still do not understand, what do you mean by 'scroll 5 time', but here's a fork of your case: https://codepen.io/mikeK/pen/NWKNQwW Happy tweening ... Mikel

Hey @sumith, What exactly is your problem? What do you mean by 'scroll 5 time then show fade out'? Please make a new CodePen. But please without a fade out on a video (that would not start anyway) - better on an image. Best regards Mikel

Hey @qqignatqq You mean the space under the last GreenSock? If you do not like this, take another approach. https://codepen.io/mikeK/pen/dybMdpx var action = new TimelineMax({paused:true}) .to('.wrapper',1,{y:-wrapperHeight+350, ease: Sine.easeInOut}); Best regards Mikel

Hey @qqignatqq, don't be confused ... https://codepen.io/mikeK/pen/MWgyOrg // !!! for up / down same ease !!! if (scrollNum > lastScrollTop) { TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut}); } else { TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut}); } Thanks ZACH. Happy tweening ... however you wish it ... Mikel

Hey @qqignatqq, Please note the easings // !!! different eases for up / down scroll !!! if (scrollNum > lastScrollTop) { TweenLite.to(action, 1, {progress:progress, ease: Power3.easeOut}); } else { TweenLite.to(action, 1, {progress:progress, ease: Power0.easeNone}); } Try another ease that fits more to what you expect. Kind regards Mikel

Hey @sumith, sorry too fast. Here a quick fork ... https://codepen.io/mikeK/pen/LYPGMva Does that help? Mikel