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.