Jump to content

daniel.mt last won the day on August 27

daniel.mt had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


daniel.mt last won the day on August 27

daniel.mt had the most liked content!

1 Follower

About daniel.mt

Recent Profile Visitors

1,112 profile views
  1. 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
  2. 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
  3. Hi and welcome You don't have a panel class. Your panel is in fact hs-img. Here: https://codepen.io/danielmtd/pen/WNzVJqE
  4. 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
  5. 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
  6. 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() });
  7. 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:
  8. 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.
  9. ScrollTrigger.refresh() Try this after you added those classes and see if it fixes it.
  10. 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.
  11. 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
  12. 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.
  13. 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.
  14. 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:
  15. 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.