brennamacquarrie

Hey @GreenSock - first of all thank you for the extended response, not to mention for these forums and the very in depth docs. Im bummed I gave the impression that I expect code review, and should have known better than to post the repo! For opening it at all, you're very patient. I have definitely been digging thru the react best practices docs but I need to spend more time with them and clean up the - probably many - spots I've missed. In most cases I am working with useLayoutEffect or useEffect and setting and clearing context but honestly it may be that the one or two times I'm not using this, I'm causing issues on mobile scroll, who knows. The other tips you gave are awesome and I will incorporate all of your suggestions. Thanks again!

Hey @GreenSock how did you find this error (aside from experience/intelligence)? I have a site that works fine on desktop, i don't see any errors, and i can resize and inspect the browser any which way and it's happy (also works on safari & chrome same same). But the site when viewed on my phone does not have any ScrollTrigger action - all other animations work fine but the scroll animations are never activated.... Here is the site: https://blxck.space/ (Here is the repo (not asking for code review! just on the off chance it helps) https://github.com/brennaMacQuarrie/blxck_react/tree/master/src ) TYSMIA! Any tips much appreciated!

just chiming in to say thanks to @mikel for dropping in that super helpful demo. wow.

hey mvaneijgen - thanks for taking a look! I had seen it done both ways (tl in context and tl above context) and wasn't sure what was best practices - thank you for pointing that out! i also noticed i could be storing my tl in a ref. I think what I was mostly missing (missing the concept with my brain) was setting the bottom of the animation to "farther" away, instead of "bottom top". I'm using 2000px and it's working much closer to how I imagined https://codepen.io/BMacQuarrie/pen/KKxRPRR?editors=0111

Hi! I want to achieve the effect that the purple circle scrolls all the way into view before the black div appears. I thought that pinning the container would achieve this, but the whole screen is continuing to scroll during the .from animation I was referencing this excellent example but could not recreate. Do I need to make this container like 200vh to allow "scroll time" for the circle's animation to complete? Seems there must be a better way ? TIA!

(vscode/local live)

yeah. this is frustrating (only getting back to it now), it's not working in vscode. but i can see that it works here. I'll spend some more time with it but it's defo confusing me.

hey @ZachSaucier! ok, here's my first codepen (ever, i just seem to always avoid it. no idea why) https://codepen.io/BMacQuarrie/pen/abZpLyo

hi! I'm having an issue getting gsap to run in my code. I've imported the CDN script above my scripts.js, <!-- GSAP --> <script src=“https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js”></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script> <!-- JS --> <script src="script.js"></script> </body> </html> and in my script.js I've got a super basic animation that isn't happening in my live load and I'm not sure why. I even installed locally and it is still not doing the stuff .. gsap.registerPlugin(ScrollTrigger); gsap.to('.ball', { duration: 1, x: 300, }); ? am i missing something silly? I've used this before too

hi! i am using the scrollTrigger successfully on my page, but i have only ONE div in my markup that is overflow-x: scroll (as opposed to the rest of the page which scrolls on y axis, obbbbbbviously). I would love to use gsap animations for this div...? the elements I want to have morphing on scroll is each separate .displayVisual (as they fall in and out along the x-axis) ... eventually i want to transform so they grow in the center as user scrolls. I'm not sure what I'm missing here.... they're still only animating on vertical scroll? gsap.from('.displayVisual', { scrollTrigger: { trigger: '.displayVisual', toggleActions: 'restart pause resume reset', scrub: true, }, duration: 1, scale: 1.3, });

hi! I am also trying to do this, do i need to register a plugin to enable this? I'm getting some syntax errors in my code where .background is my <header> element with a background-image: set in my css, which I want to toggle either over time or with a button, neither of which are working just yet. thanks so much, super stoked on gsap, first day using it! TweenLite.set($(".background"), { css: { backgroundImage: 'url(/assets/siteHeaderOne.jpeg') } });