Jamesh

Hi @DevC , @Rodrigo, @mvaneijgen I'm trying to integrate GSAP with Astro. In my index.astro file I'm importing gsap as below: --- import { gsap } from 'gsap'; import Layout from '../layouts/LayoutLanding.astro'; gsap.set("svg", {transformPerspective:600, transformOrigin:"50% 50%"}) gsap.to("svg", {rotationX:360, duration:10, repeat:-1, ease:"none"}) gsap.to("svg", {rotationY:360, duration:15, repeat:-1, ease:"none"}) gsap.to("svg", {rotation:90, duration:6, repeat:-1, yoyo:true, ease:"power2.inOut"}) --- This is throwing a console error: Cannot read properties of undefined (reading 'querySelectorAll') /Users/hickie/Documents/Websites/Astro/triangulate/node_modules/gsap/dist/gsap.js:640:175 639 | toArray = function toArray(value, scope, leaveStrings) { > 640 | return _context && !scope && _context.selector ? _context.selector(value) : _isString(value) && !leaveStrings && (_coreInitted || !_wake()) ? _slice.call((scope || _doc).querySelectorAll(value), 0) : _isArray(value) ? _flatten(value, leaveStrings) : _isArrayLike(value) ? _slice.call(value, 0) : value ? [value] : []; | ^ 641 | }, 642 | selector = function selector(value) { 643 | value = toArray(value)[0] || _warn("Invalid scope") || {}; If I try and run the js using <script > gsap.set("svg", {transformPerspective:600, transformOrigin:"50% 50%"}) gsap.to("svg", {rotationX:360, duration:10, repeat:-1, ease:"none"}) gsap.to("svg", {rotationY:360, duration:15, repeat:-1, ease:"none"}) gsap.to("svg", {rotation:90, duration:6, repeat:-1, yoyo:true, ease:"power2.inOut"}) </script> then I get a uncaught referenceError: gsap is not defined. There's little online to give clear instructions about how to integrate Astro and GSAP so was hoping you might be able to shed a little bit of light on how you've gone about implementing this. Any help would be very appreciated. Thanks

I'd like to animate a triangle (which will be an SVG) like the enclosed but using GSAP. https://codepen.io/jame5/pen/WNyMGPa I'm sure this is possible but hoping someone might give me some pointers as to how to do this?

In the interest of helping out others, and from @GreenSock suggestions please find best solution below: https://codepen.io/jame5/pen/QWQowjp

Thanks Jack. I agree its certainly a CSS issue, in part. Would be great to hear your further thoughts on the 'oddness' you mentioned. All the best. James

Here's a little playground of the workaround I eluded to above...still not right though https://codepen.io/jame5/pen/ExQrepJ

Ive been trying for a couple of days to get this to work! Essentially I have smoothscroller working with some simple parallax effects when scrolling through the page. The issue I'm having is that if the text on the opposite site of the image is longer that the image is creates a blank at the bottom of the image (you may need to resize your viewport). Please see last section of the codepen attached. I guess this makes sense as the CSS is specifically setting the height to 100vh but does anyone know of a solution whereby the image always fills its container to mirror the height of its sibling element? I thought a workaround would be to find the height of the text element and then set the image-cont-height to mirror the height and then use calc in js to add additional pixels to create the parallax effect.

@PointC. Spot on. Thank you.

@akapowl. So this is how far I've got with my 'read more' text. I want to be able to get the read more text to expand as the screen is resized which I've achieved but when the button is used to close the text its not as smooth as I would like . I was hoping that I might have been able to use offsetHeight as part of a resize addEventListener but the height was being set as an inline style and I couldn't get it to refresh so I have opted to set height to auto as it currently stands. The problem I have is that the animation is 'jerky' if you resize the screen with the read more section active and then click the button to see 'less about us'. Is there any way of refreshing on resize to ensure that GSAP understands the exact height of the element to ensure a smooth animation? Codepen URL below: https://codepen.io/jame5/pen/NWyPmJb

Thanks for this. I didnt know about transitionend. As I was already using GSAP I went down the GSAP tween route - much less code (12 lines versus 64 my other way!!). I also took advantage of onReverseComplete: () => ScrollTrigger.refresh(),. Thanks again.

I have a a "click" event listener that expands some read more text. I have called ScrollTrigger.refresh(true) in that callback which is kind of working. I have a transition being applied to the height of the element of 500ms, so the refresh is slightly out when recalculating the trigger position. I read that if trueis set, it will wait for at least one requestAnimationFrame tick, and up to roughly 200ms before initiating the refresh. If I set the duration to 200ms of my transition then refresh sets the position perfectly. Is there anyway to increase/manually update the duration that ScrollTrigger.refresh(true) takes in order to allow for the transition to take place and then have the trigger position reset? Thanks

Think I’ve solved this. Sorry for wasting anyone’s time…

I’d like to try and do this functionality using vanilla.js only but have failed! I have created a codepen of where I’ve got to. The effect works perfectly on enter but I cant seem to get it to work when leaving and re-entering. If anyone can help solve this, would be very appreciative. Thanks in advance. https://codepen.io/jame5/pen/mdpPWEy

I’m doing some research into how you can reveal/mask fixed elements which contain both text and SVG. I’d like to replicate how immerser.js works but use GSAP and ScrollTrigger instead. Is this possible and, if so, could you point me in the right direction? Thanks in advance.

@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