Jamesh

@Hirbod Thank you for kindly making further comment. Just to clarify you have removed registry=https://npm.greensock.com from the .npmrc file? And that everything works fine once this has been removed? I’m using this locally but will be deploying to Netlify so hoping it won’t throw up any errors!

Thanks @Hirbod. Simply removing the @gsap: before registry=https://npm.greensock.com solved the issue for me as well... follow the instructions from there...

Thank you so much....

Hi Zach Thanks for your quick response, as always. I just wanted to clear up whether ScrollTo would do the gruntwork of animating to sections on a different page, as you suggested, which I've taken from your message that it doesn't. So now I just to work out how to parse the URL for when the page loads. If you have any suggestion on how to do that, that would be gratefully received! Thanks again James

Unfortunately I cant replicate on a CodePen (I don't think) as this involves using the scrollToPlugin to scroll to an anchor # on a different page. Essentially I have a horizontal scrollTrigger animation on my homepage. I have a number of sections that can be scrolled to using the scrollToPlugin which are triggered by clicking on menu items in an off-canvas menu. This works as it should on the homepage, and the scrollToPlugin deals with adjusting/calculating the height of the horizontal scrollTrigger. However, if I want to access the sections from the menu on any other page, the scrollToPlugin does not function. Is this sort of functionality possible and if so what are the next steps? This is my code so far: function initScroll() { document.querySelectorAll('.anchor').forEach((a, index) => { a.addEventListener('click', () => { gsap.to(window, { duration: 1, scrollTo: { y: '#section' + (index + 1), offsetY: 70 }, }); }); }); Thanks in advance for any thoughts...

Found an answer to my own question for anyone looking. Add this to your ScrollTrigger. invalidateOnRefresh: true,

Spot on. I thought it was possible to use a function but was struggling to get there. Thanks for your speedy help, much appreciated. How would I go about making the scrollTrigger refresh on resize?

Spot on. I thought it was possible to use a function but was struggling to get there. Thanks for your speedy help, much appreciated.

I'm trying to make a div scroll horizontally all the way down a sister element. If you look at the code pen I've created, the box to left scrolls down 90% of it height in relation to the image on the right, this is as expected given that I have set a tween to go 90% down the y-axis. However, what I'd like to achieve is for the box on the left to scroll the whole height of the image and bottom out when the bottom of the box on the left reaches the bottom of the image on the right. Essentially I'd like the left box to scroll the whole length of the image on the right regardless of how tall the image gets and therefore be completely responsive. I've looked at using media queries but this simply isn't a dynamic way of approaching it as there are just too many variables. Any thoughts on how that might be achieved? Thanks in advance.

Its appears the font is still flashing/jumping/bouncing in Safari and Firefox. Seems fine in Chrome. Any further pointers to avoid this happening? Thanks

Hi Zach Thank you for the pointers which all make sense. I've amended the Codepen to reflect what you've said and now have the revert working as I'd like. I found that the font was bouncing/jumping so in case anyone see's this thread, I set font-kerning: none on the body in CSS. https://codepen.io/jame5/pen/dyMBaQm Thanks James

Hi there Hopefully someone can help? I'm trying to remove the inner HTLML styles and markup when SplitText is done by applying .revert(); but it doesn't seem to be working. I'm probably missing something quite basic but at the same time confident I have coded in the correct way? Thanks James

I have a portfolio which can be filtered. The animation I have is a reveal which works fine when viewing all the items (and using the filter), as ScrollTrigger is able to work out the position of each of the items. However, when the items are filtered, and one of the items which has not come into the viewport is activated, the transition fails to trigger. I'm assuming that this is because ScrollTrigger has already assigned its position in the initially loaded page. Is there a way of refreshing the position of an element after it has been filtered? I have tried onRefresh but have failed so far. Thanks James

Excellent. Thank you....

Loving ScrollTrigger. I've got the functionality of what I want to do working, codepen URL https://codepen.io/jame5/pen/YzwzdpP. However, I am using IDs to trigger and another ID to toggleClass by using toggleClass: { targets: timelineImage, className: 'active' },. I have a lot of images, 38, and I'm sure there is a better way in which to target the elements rather than having to specifically generate code each time for each image and section and therefore generating essentially repetitive code, as well as making making it more dynamic for future use. I started working along the lines of: if (document.querySelector('.timeline')) { const timelineContainers = document.querySelectorAll('.timeline-content'); timelineContainers.forEach((container) => { const timelineTrigger = container.querySelectorAll('.timeline-trigger'); const timelineImage = document.querySelectorAll('.timeline-image'); ScrollTrigger.create({ trigger: timelineTrigger, markers: true, toggleClass: { targets: timelineImage, className: 'active' }, start: 'top 40%', }); }); } but this obviously adds the className to all the .timeline-images and not one-by-one as you scroll past each .timeline-content, hence my workings thus far. Thanks in advance! PS. Is it best practice not to animate the same element as your ScrollTrigger?