code stan Posted January 7 Share Posted January 7 ScrollTrigger not animating the element ".profile__container", unless I add scrub. I want the scrollTrigger to element without the scrub. Is there something I'm doing wrong. useEffect(()=>{ const profileAboutTexts = document.querySelectorAll(".profile__about p"); // const profileContainer = document.querySelector(".profile__container") // const about = aboutRef.current profileAboutTexts.forEach(text=>{ new SplitType(text, { types: 'lines, char' }) }) const anim = { y: 130, transform: "rotateZ(25deg)", opacity: 0, stagger: { amount: .8 }, } const ctx = gsap.context(()=>{ tl.current = gsap.timeline(); tl.current.from(".profile__about p:first-child .char", {delay: 2, duration: 1.3, ...anim}) tl.current.from(".profile__about p:last-child .char", {...anim, scrollTrigger: { trigger: ".profile__container", start: "top 40%", end: "top 20%", markers: true, } } ) }, aboutRef) return ()=> { ctx.revert() } }, []) Link to comment Share on other sites More sharing options...
GSAP Helper Posted January 7 Share Posted January 7 It's very difficult to troubleshoot without a minimal demo; the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen Using a framework/library like React, Vue, Next, etc.? CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: React (please read this article!) Next Svelte Sveltekit Vue Nuxt Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
code stan Posted January 15 Author Share Posted January 15 On 1/7/2024 at 6:32 PM, GSAP Helper said: It's very difficult to troubleshoot without a minimal demo; the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: Using a framework/library like React, Vue, Next, etc.? CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: React (please read this article!) Next Svelte Sveltekit Vue Nuxt Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Thank you for the feedback, here's the minimal demo you requested Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 15 Solution Share Posted January 15 I noticed several problems: You set the scope on your gsap.context() to aboutRef...but there was no aboutRef element! So your selector text couldn't find anything (invalid scope). You nested a ScrollTrigger inside a tween that's in a timeline. The playhead can't be controlled by both the parent timeline and the scroll position. So never nest ScrollTriggers like that - just apply it to an individual tween (that's not in a timeline) or on the timeline itself. I noticed that you set the trigger to be ".profile__about" with a start of "top 40%" but since that element already starts all the ay up at the top, I wonder if maybe you intended to use '.profile__about p:last-child' as the trigger? I'm guessing. I'd recommend never using the "transform" property directly, like transform: "rotateZ(25deg)". It's faster and more reliable to use the components like rotation, x, y, scaleX, scaleY, etc. So in this case, rotation: 25 Good job using gsap.context(), but we recently released a useGSAP() hook that makes it even easier in React. I don't see any reason you need to create a ref for the timeline since you're not trying to access it anywhere outside the hook. So you can simplify things a bit. I wonder if you were trying to do something more like this?: https://stackblitz.com/edit/react-7yqfay?file=src%2FApp.js,src%2Fstyle.css Link to comment Share on other sites More sharing options...
code stan Posted January 15 Author Share Posted January 15 Hmm, Thank you, yeah something like. Lots of loop holes in my code, not what I intended, the take from this is 3 and 4. Thank you so much Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now