daniel.mt

The scroller end doesn't reach the end. Try to either reduce the top of the endTrigger from 10% to 0 or lower or make the viewport bigger for it to reach and see if this works for you I recommend you to add markers: true. It's easier for you to debug it:

Hey there. There is one question that is bothering me and avoided it for quite some time. In scrolltrigger you have the directional property. If it's true you get to the last intended snap on a small scroll. If it's false you get it to the closest value so that is I suppose around the distance from a to b splitted by half . But with directional false can you change how close that value is ? Right now it's working this way: Values: [0, 0.5, 1] 0 -> 0.5 it will snap at 0.25 this means 50% of 0.5 . But can we snap to 0.5 when it gets to the 0.1 value that means 20% ? 0.5 -> 1 it will snap to 1 at 0.75 . Can this be change to 0.6 to snap to 0.75? this means 20% ?

Css animation don't play nice with elements that are moved around the dom using js ( this includes cloning / wrapping / unwrapping / appending ) This is why: - on load the css animation is rendered and played - after html & css is loaded js comes into play and starts altering the object ( in this case it gets wrapped into a pin-spacer div). This causes the animation to play again ( because css is like: hey a new element appeared and I have properties for it so let me reapply them. Oh an animation. Let me play it. Oh it already played, let's restart it) . This can be viewed at its best if you constantly wrap an element into a div: here is a simple extreme case: https://codepen.io/danielmtd/pen/MWGWgMZ Try to resize the window and observe that the animation is constantly restarting on each resize ( this thing is happening in your case. On load the element is wrapped inside pin-spacer, on resize the pin-spacer is refreshed - this means that the container is unwrapped and wrapped again ). Now how can you avoid this ? There are 2 solutions: 1. As quoted above you can create another element ( replace pseudo with any valid html element ) and use gsap. 2. Use transition instead of animation. Here is an example: https://codepen.io/danielmtd/pen/rNvNNza

I confirm as well that this may be a bug. If you need a fix asap a workaround would be to apply the tween on group instead of the path. Or you can remove the x/y from your path. https://codepen.io/danielmtd/pen/dyebqJQ

Hi and welcome You don't have a panel class. Your panel is in fact hs-img. Here: https://codepen.io/danielmtd/pen/WNzVJqE

You're not a bother no worries. I was in your place as well. Just make it a function and call it in the start ( it can be a method as well) . Also you can refresh the tween on resize for a smoother transition on height change. Without it still works but the refresh is debounced. Here: https://codepen.io/danielmtd/pen/ZExgQar

Everything inside ' ' or " " is called a string but when you change these to backticks ` ` it's transformed to a template literal that it's still a string but it gives you the option to add variables inside it and supports multiline strings. It's just sugar syntax to make the code more readable. For short: `top ${property}` can be easily replaced to 'top ' + property or "top " + property You can read more about template literals here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals If the trigger location is set top it may not find that css variable ( check for typos ). Try to log it in your website and see if it outputs something. https://codepen.io/danielmtd/pen/oNqKoWo

Hey, Most probably the min_tallestBox() and min_highesBoxes() were the main issues. You can try fiddling with it by removing the refresh from the document.ready and check if the issue reoccurs. It's no harm if you're adding it multiple times most probably the method already verifies if start / end position has truly changed or not so is up to you. As a word of advice I would refactor the top code like this : // Add bottom padding to blocks before $(document).ready(function() { $(".expanding-video").prev().addClass("bottom-excess-video"); $(".expanding-image").prev().addClass("bottom-excess-image"); $(".expanding-video").next().addClass("top-excess-video"); $(".expanding-image").next().addClass("top-excess-image"); // try to remove this ScrollTrigger.refresh() and see if the issue appears. ScrollTrigger.refresh() });

Hey, Yhep you can but first you need to get that property using gsap.getProperty(). Here is an example: https://codepen.io/danielmtd/pen/ZExgQar More details: https://greensock.com/docs/v3/GSAP/gsap.getProperty() P.S you can animate css properties as well:

In this case yes. If this doesn't work the culprit may be somewhere else. Usually you call .refresh method if the total page height is changed using javascript. This applies on async calls as well. For example if you have content that comes later you need to call ScrollTrigger.refresh after the content is painted on the screen to push those markers in the right position. https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh() Edit: I think your culprit is in here : function min_tallestBox() { var tallest = 0; $('.match-height').css('height','auto') $('.match-height').each(function() { if ($(this).height() > tallest) { tallest = $(this).height(); } }); $('.match-height').each(function() { $(this).height(tallest); }); // what you need to add ScrollTrigger.refresh() } Also function min_highestBox() { var highest = 0; $('.post-tags').css('height','auto') $('.post-tags').each(function() { if ($(this).height() > highest) { highest = $(this).height(); } }); $('.post-tags').each(function() { $(this).height(highest); }); // what you need to add ScrollTrigger.refresh() } See if this fixes it.

ScrollTrigger.refresh() Try this after you added those classes and see if it fixes it.

The easiest approach is to move the heading html inside "vertical-scroll-inner". Those boxes are stationary and have only opacity applied. The only thing moving is vertical-scroll-inner div. I adjusted the original codepen quoted above.

Hey, The .set method applies those properties on load without animating them. If you want to animate both properties at the same time you can add the rotation and x in gsap.to / or .from / or .fromTo depending on what you want to achieve . If you want to chain them you can create a timeline and add those tweens to it. Here you can find some helpful insights: https://greensock.com/docs/v3/GSAP https://greensock.com/docs/v3/GSAP/Timeline Here is a simple example that may help you understand how it works. https://codepen.io/danielmtd/pen/RwMzoKg

Hey, You need to pass a function to onComplete like this: // normal function onComplete: function() { console.log('finish') } // arrow function onComplete: () => { console.log('finish') } Gsap calls your function something like this: onComplete(). On your logic gsap would call it like: console.log('finish')() which throws an error. Hope this clears up.

Hey, Came back with a change. This is what you're looking for ? https://codepen.io/danielmtd/pen/xxWowrp Also the example you given it's more of a hooking a timeline to the scroll and scrubbing it. There are quite a few examples in here: https://greensock.com/st-demos/ that can help you achieve this. How I'd tackle a problem like this is: - creating a timeline - debugging it using gsDevTools - creating the scrolltrigger and addig the animation to it.

Hey, I think that it would be a better approach to apply a scrolltrigger on each selector instead of the whole container . Here is an example: https://codepen.io/danielmtd/pen/eYMaLWL And instead of pinSpacing you can adjust the height of that container however you like. Don't forget to trigger ScrollTrigger.refresh() after changing the height ( without this the markers are thrown off and you'll not get accurate triggers ). Also you have the option to pin or not the heading based on your preference. Check this article:

Hey, Try removing tweens from images around that section ( especially scale / opacity ) Try removing filter: blur ( if you're using ) See if this improves the overall perfomance. This is directly related to the browser and from my experience removing these and finding alternatives solved my issue.

Hey, One thing I noticed is that the sections where you have the filter: blur applied the browser struggles to render it. I had a similar case in the past ( 1 year ago) and this was due to this filter. You can start by removing it at first and see if this improves The next thing you can do is to remove tweens applied on images especially the transform: scale and opacity. This is a problem I had 1 month ago. Due to transform: scale applied on image using css or gsap caused the image to not render correctly. These all are related to the browser and the only workaround is to replace these.

Hi, In this case you could check before applying .fromTo tween if the selector has opacity. https://codepen.io/danielmtd/pen/zYWQZEX/3412541bd1c27591de127aeb3c5f8eb4 For more details on how to use getProperty https://greensock.com/docs/v3/GSAP/gsap.getProperty

Hey Swalker, You need to add ScrollTrigger.refresh() in the callback where you change the height of that/those element(s). Here is an example of what happens when you change the height of an element without triggering the refresh method and with refresh method: https://codepen.io/danielmtd/pen/LYdoRXG/e683799bbcade7f1e4ccfebdcefdea22 As for the replacement. I don't quite know the whole context on what you have in there. In the codepen I just refactored your tweens in a foreach loop. You can revert it back if this causes issues.

I can see that you're changing the height of log-book-left-side on resize. This may be the issue and the solution is to call the refresh method after you changed the height of the element. The method is: ScrollTrigger.refresh() Please note that if you add dynamic elements / change the height of the elements and this causes the layout to grow / shrink you need to recalculate the start / end markers. Here is a more detailed explanation: https://greensock.com/docs/v3/Plugins/ScrollTrigger/refresh()

Hey, Tested your solution and I can't replicate your problem. Did you try it outside codepen as well ? Here is a simpler solution: https://codepen.io/danielmtd/pen/LYdoRXG/e683799bbcade7f1e4ccfebdcefdea22

Hey, So a little background on this: I'm trying to create a popup with this functionality ( the scrollable container is a div not the body ). The timeline works great but due to jittery in macos / ipad I have to use pintype fixed instead of transform. All good but as I and all know due to how fixed positioning works it covers the whole scroll which makes this div unscrollable. Inside I have some cards / boxes in this case and what I'm trying to do is to make parts of the boxes be clickable with pointer events and the whole container over the fixed to have the pointer-events: none ( so the user can scroll when it's between but not when it's over some links ) Now the problem: In this example I'm trying somehow to find the div that is snapped and make all elements inside clickable till you scroll again. After the first scroll it should turn those into pointer events none, once is snapped turn them to pointer events auto. I tried using the update method that scrolltrigger offers and so I did with this little piece of code: var progress = Math.round(Math.round(i.progress * 100) / 100 * (length-1)); if(typeof boxes[progress] !== "undefined") { console.log("it's in range") } else { console.log("it's not in rage") } It works great but apparently due to rounding it triggers from one element to another without triggering the else . It in essence works as it supposed to be ( round the 0.21312 to 0, 1.3243 to 1 and so one which is the item index ) but I can't find any solution to catch the middle ground ( where the scrolling is in progress ) . In this particular case I suppose that the red box inside the white should have pointer-events: auto at init and pointer-events: none once you start scrolling. Once you snap to a point it should turn back to pointer-events: auto. Thanks .

Thanks a lot for your help. Another possible solution is to add those offsetPositions to a timeline. Makes it more snappier... https://codepen.io/visualbadger/pen/oNWjaPa?editors=1111 I think I'll stick to the ones with multiple tweens as it's not entirely my decision . Thanks a lot for your time. Really appreciate.

@Cassie Thanks for the clean solution . It seems the most logical way of doing this type of thing although the request ( not mine unfortunately ) was to immediately snap without any previous movement of the carousel. Luckily after you posted your solution I headed to docs to see exactly what snap / snapTo does to and I stumbled upon a comment that lighted the solution . The main problem with mine was this part: start: () => (i - 0.5) * innerHeight + centerCarousel.offsetTop, end: () => (i + 0.5) * innerHeight, Where I took the thinking all wrong. So instead I removed the previous pin section and refactored the loop. Instead I added this: trigger: '.carousel-container', pin: true, start: () => { return "top center+=" + (i * 25 + "vh") }, start: () => { return "top center-=" + (i * 25 + "vh") }, Thanks all for your time . Really appreciate. For whoever stumbles on this post: Check @Cassie solution 2 posts before as it's the cleanest. My final solution: https://codepen.io/visualbadger/pen/qBmOPOV