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...