romain.gr

Hi Jack, Thanks for your answer, it definitely works now but I have no idea how it has been done : triggers.forEach((t) => t.start <= window.pageYOffset && t.vars.onEnter && t.vars.onEnter()); I understand nothing about this line, it's way too abstract for me, t.start, t.vars.onEnter and t.vars.onEnter(), what's that? Could you break down this line, and explain each bits? So I can understand what it says exactly. Plus is there some documentation somewhere (on gsap forum, on the web or on the gsap website) explaining this whole issue, I guess I'm not the only one wanting to do that. I checked the ScrollTrigger.isInViewport(), but it only check if the item is in view (or if x% of the item is in view), it would be great if we could pass start: 'top 90%', to it. It doesn't work in my case cause I want the class to be added when my item touches 90% of the viewport and not when my item is 90% (or 10% or whatever) in the viewport. I'm I wrong? Thank you.

Hi, I have a little problem with the ScrollTrigger.refresh() function, actually it doesn't work as I was expecting to. As I mention in the title, when I use it, it doesn't affect items that has already passed the scroller-start marker. So on the demo, I'm filtering a list of items, then I refresh the scrollTrigger and only the items after the start marker works. Here is my scrollTrigger using create (on page load it works perfectly, the class is added to the items passed the start 'top 90%') : $('.list-item').each(function(){ var $this = $(this); ScrollTrigger.create({ trigger: $this, markers: true, start: 'top 90%', onEnter: function(){ console.log($this); $this.addClass('list-item--is-active'); }, }); }); Then I'm filtering my item using Mixitup (not sure this info is relevant) : mixer = mixitup('.list', { selectors: { target: '.list-item' }, animation: { duration: 0 }, controls: { live: true, toggleDefault: 'all', toggleLogic: 'or' }, callbacks: { onMixEnd: function(state){} } }); var listOfFilters = []; $('.filters button').on('click', function(e){ var thisFilter = $(this).data('filter-item'); $(this).blur().toggleClass('btn--active'); $('.list-item').removeClass('list-item--is-active'); if(listOfFilters.includes(thisFilter)){ const index = listOfFilters.indexOf(thisFilter); listOfFilters.splice(index, 1); } else { listOfFilters.push(thisFilter); } gsap.to('.list', {autoAlpha: 0, onComplete: function(){ if(listOfFilters.length){ mixer.filter(listOfFilters.toString()); } else { mixer.show(); } gsap.to('.list', {autoAlpha: 1}); ScrollTrigger.refresh(); // setTimeout(function(){ // ScrollTrigger.refresh(); // gsap.to('.list', {autoAlpha: 1}); // }, 1000) }}); }); So on click on filter button (line 38 on codepen), I remove the .list-item--is-active class from all my .list-item (line 43); Then on line 52 I use gsap to hide my list -> on the complete : make the filtering -> then show the list and refresh the scrollTrigger. The refresh should add the .list-item--is-active to the element at the top of the list, like it does on page load, but it doesn't, why? So on the demo : - load the page, - scroll to the bottom - scroll back to top - then start filtering and unfiltering the list using the top buttons You'll see that it doesn't work very well. I'd like to know why and is it possible to make it work? Thank you.

Hi, I'm trying to make something super basic but I can't find anything in the snap documentation that does that. Is it possible to choose the amount of scroll between each block (eg: in percentage) before the snapping happens? Here in my example, as soon as the first block touches the top of the viewport , it snaps directly to the second block/slide. Overall, I find the snapping feeling not very natural or, and it's possible I'm not using it as I should. On a side note, there is always a delay when the user stop scrolling and the snapping, even if it's only few milliseconds, you can feel it and it's not nice, and this feeling is even more present when coupled with a smooth scroll. I've seen snapping on websites that feels right, I'm wondering if they are using snap for that, cause I've been playing with it for long long time and I never end up with something that feels right. Anyway, in my case I would like : 1) not snapping directly to the second slide, but wait that I scrolled 50vh and then snap. 2) avoid that weird delay explained before. 3) to stay on each block/slide a certain amount of time (of scroll?, this is related to point 1) before switching to the next one (in both direction), I tried multiple stategies here, make the next blocks bigger and add padding-top (so you need to scroll more before accessing the next slide), add delay in the tweens, nothing works. I'm pretty sure I'm not using the right strategy here, maybe snap is not the tool for what I want to do, and I can't find anything on the forum that fit my use case, tho it sounds like something very basic (make that smooth). So if there is a post on this forum or a codepen example that would be great. Thank you.

Hi @GreenSock, Thanks for your quick answer and sorry for my late reply, I had to switch to something else. Anyway, I tried and actually the new version of observer works as expected, I don't really understand the other version, but I'll check about that delayedCall and pause(), at least for another use. Thanks again ;)

Hi, I'm trying to implement Gsap Observer, but I find the documentation unclear on one little point. So the doc says : onChange : Function - function to call when there is movement on either the y-axis (vertically) or the x-axis (horizontally). It will keep calling the function as long as the movement continues (subject to any tolerance threshold). I understand that when there is a mouse movement (type: 'pointer'), it should be triggered, but nothing happens, the onChange function is only triggered if I click and then move. That's not what the documentation says. It says "when there is movement" only. Actually I would like to catch the velocity when the cursor moves (and only moves), apply the velocity to something, and then, when the cursor stops, do something else. So I used onMove, it works great, It seems to be design to do exactly what I want. The problem is that the onStop event doesn't trigger when the mouse stops to move. The onStop event, in my case, only works with onChange, but as I said previously, the onChange event only trigger when I drag (click and move). Is there a onStopMove event? Observer.create({ target: '.first-screen', type: 'pointer', onChange: (e)=>{ //only works when mouse pressed var vel = e.velocityX * Math.sign(e.velocityX); gsap.to(document.querySelector('video'), {playbackRate: vel /1000}); }, onMove: (e)=>{ //triggered when mouse mouse hover '.first-screen' var vel = e.velocityX * Math.sign(e.velocityX); gsap.to(document.querySelector('video'), {playbackRate: vel /1000}); }, onStop: (e)=>{ // this only triggers when onChange stops, I WANT THIS TO WORK WHEN THE CURSOR STOPS MOVING console.log('STOP'); gsap.to(document.querySelector('video'), {playbackRate: 1}); }, }); Thank you. I made a codepen, it's very confusing: https://codepen.io/romaingranai/pen/abPqyza The onMove and onChange trigger when I move the cursor over the red square, but the onStop only triggers, when I click, move and then release.

Hi mvaneijgen, Great, Thank you, that works perfectly! For the Blur/velocity issue, I did some simple stuff that seems to work (so far). I have added a onLeave and onLeaveBack which tween the svg attr to 0, when left and also checking the velocity "power", if not enough velocity do nothing otherwise blur the stuff. Here is the code : servicesCarousel(); function servicesCarousel(){ var numOfItem = $('.services__carousel__cell').length; gsap.to('.services__carousel', { scrollTrigger: { trigger: $('.services__carousel').parents('.section'), start: 'top top', end: () => {return '+=' + window.innerHeight * 1.5}, scrub: .0001, pin: true, // markers: true, snap: { snapTo: 1 / (numOfItem - 1), // snapTo: [0, .25, .5, .75, 1], duration: {min: 0.3, max: 1}, // directional: true, ease: Expo.easeOut, }, onLeave: () => { gsap.to('#test', .25, { attr: { stdDeviation: '0 0'} }); }, onLeaveBack: () => { gsap.to('#test', .25, { attr: { stdDeviation: '0 0'} }); }, onUpdate: function(self){ var direction = self.direction; var velocity = self.getVelocity() * direction; if(velocity > 300){ // console.log('MORE THAN 300') gsap.to('#test', .25, { attr: { stdDeviation: '0 ' + velocity / 150 } }); } else { gsap.to('#test', .25, { attr: { stdDeviation: '0 0' } }); } }, onSnapComplete: function(){ gsap.to('#test', .25, { attr: { stdDeviation: '0 0'} }); } }, '--rotate-x': 288 + 'deg', ease: 'none', }); }; And the updated pen with your advices : https://codepen.io/romaingranai/pen/jOXaKXb?editors=0010 Thanks again !

Hi, I've been trying again and again without any success, I must be missing something. I have a simple scrollTrigger animation, my first question is: - How to make snap to work? I followed the example in the documentation which say 1 / (sections - 1) But it never stops at 25% (50%, 75%, ...), never, I have 5 "slides", it never snaps to the center of the item. What 's my mistake? Question number 2 : Is there something like onStopUpdate or onStopScroll (or any other technique)? Because I'm using onUpdate to get the scroll velocity and then use the value to tweek a svg filter. The problem is that even after stop scrolling, sometime the value stays at, let say 20 (see picture), and the filter is still applied to the element. As far as I understand, the velocity should go from 0 to something then back to 0 when stopping to scroll, if I log the velocity I never see that, It's not very smooth. I know I could use onSnapComplete but, first, I'm unable to use snap properly, and second it won't solve my problem in case I don't use snap, and third, it's seem more like a hack rather than a true solution. function servicesCarousel(){ var numOfItem = $('.services__carousel__cell').length; gsap.to('.services__carousel', { scrollTrigger: { trigger: $('.services__carousel').parents('.section'), start: 'top top', end: () => {return '+=' + window.innerHeight * 1.5}, scrub: .0001, pin: true, // markers: true, snap: { snapTo: 1 / (numOfItem - 1), // snapTo: [0, .25, .5, .75, 1], duration: {min: 0.3, max: 1}, // directional: true, ease: Expo.easeOut, }, onUpdate: function(self){ var velocity = self.getVelocity(); var velocity = velocity < 0 ? velocity * -1 : velocity; // var vel = gsap.quickTo('#test', 'stdDeviation', {duration: 0.4, ease: 'power3'}); // vel('0 ' + velocity / 100); gsap.to('#test', .5, { attr: { stdDeviation: '0 ' + velocity / 100 } }); }, // onSnapComplete: function(){ // gsap.to('#test', .5, { attr: { stdDeviation: '0 0'} }); // } }, '--rotate-x': 288 + 'deg' }); }; Thank you!

Hi @Rodrigo, Thank you for your detailed answer! All clear. I finally managed to do it but without using the snap functionality, cause I needed to scroll up and down. The solution was based on another example found on the forum by @ZachSaucier (the codepen : https://codepen.io/GreenSock/pen/NWxNEwY , and the thread: Here is the (a) solution : let panels = gsap.utils.toArray('.block-scroll'), scrollTween; function goToSection(i) { scrollTween = gsap.to(window, { scrollTo: {y: i * innerHeight, autoKill: false}, duration: 1, ease: Power3. easeOut, onComplete: () => scrollTween = null, overwrite: true }); } panels.forEach((panel, i) => { ScrollTrigger.create({ //markers: true, trigger: panel, start: 'top 75%', end: 'top 25%', onEnter: self => { self.isActive && !scrollTween && goToSection(i+1); console.log(panel); }, onEnterBack: self => { self.isActive && !scrollTween && goToSection(i); } }); }); Anyway, thanks for your quick answer.

Hi, I'm implementing a very simple example of snap based on this demo https://codepen.io/GreenSock/pen/KKpLdWW. The problem is that if directional is set to false I have to scroll half the screen to be snapped to the next section (which is way too long), if directional is set to true, as soon as I scroll up or down I'm snapped to the previous or next section (which is way too short), the ideal would be to decide how much you've been scrolled before the snapping triggers (eg: 25% of the screen). I've been reading the doc and few other posts on this forum without really finding an exact answer or if it's at least doable. I start to think that I shouldn't start from the gsap demo and rather think differently, so is there a way to achieve that? Is there another way to approach this? the js code for the problem starts at line 215. Thank you.

Thank you for all your answers, @OSUblake, I had a quick look at your pen, it works very well for your used case, when only a word is selected, when the 'circle' stay always almost the same (i mean, not too spread, cause obviously without the vector-effect="non-scaling-stroke" the path stroke width is bigger on the edges) and I might use your example for similar kind of work. But I might have an idea, I could create multiple paths, all having a different width, and call them depending on how many words my span contains, let say that I create 10 different path in Illustrator from small to wide, and insert them in the dom based on the number of letter contains in a span. That might be the solution, cause I want to keep some king of flexibility (giving the client the possibility to surround any word in a sentence in the back-end administration) that vector-effect="non-scaling-stroke" gave me but obviously without the down side of that technique. I'll post the result here when I'm working on it again. Obviously I did not ignore the warning in the console, I was just wondering if, somehow, it was possible to (re)calculate the length of that path manually by dark mathematic functions, as suggested by @Cassie Thank you for your help and directions.

Hi @Cassie, I actually stumble across that thread on stack overflow during my researches, tried to integrate the solution to my case, without success. Thank you for trying ;).

Hey @mvaneijgen, it's used to "scale" the path, if you scale it without vector-effect="non-scaling-stroke", the path will look squashed, by using it it resize the path but not the stroke (the first codepen has been updated, 2 exact same path). That way it would be super flexible and I could create, let say 20 different paths (using the same logic : a 100/100 svg parent, thus the path points are expressed in %, that way the path could adapts to any word length, that actually works if the path is not animated, + it's responsive). But more I think about it and more I'm wondering how can the stroke 'thickness' can affect the length of the path.

Hi @mvaneijgen, thanks for you answer, but your example is missing a few things. 1. I'm using illustrator with the pen, the d attribute of the path looks pretty much the same as yours. 2. you remove everything in your example, the shape needs to surround some text, and adapt itself to the word it surrounds. 3. the vector-effect="non-scaling-stroke" and preserveAspectRatio="none" are missing from the path and the svg element, and for sure those attributes are causing the miscalculation of the path length. I quickly remade your example to include all those parameters and I have the same issue, without changing your path: https://codepen.io/romaingranai/pen/jOYVaOp Thank you

Hi, I've trying to achieve something and I'have read plenty of gsap forum threads on the subject without finding the solution. On the codepen you can see that some words are surrounded by a svg path stroke, I'm trying to animate that line, like a line drawn by a pen around a word. But it looks like the path length is not correctly calculated by GSAP (?), I first thought about a browser inconsistency (as read in other threads), but it's doing the same on all browsers. The problem is fixed by removing preserveAspectRatio="none" on the svg element, but obviously it's not what I try to do. You can see the end line is drawn at the same time as the start line. Not really sure if it's doable as I really checked all around the forum, if someone has another way to achieve this and keeping the flexibility of resizing the path to the word width and height. Thank you

Any clues? What could be the problem? are my ScrollTriggers created in the wrong order? Could anyone redirect me to any post on the forum? It drives me crazy!