Windpixel Posted January 5 Share Posted January 5 Just had a quick logic question about where to start storing tweens so we can revert them later when using gsap.registerEffect. I'm familiar with the cleanup process of split text objects which from reading this forum, which as of ~Nov 22 aren't supported directly in via gsap.context for cleanup, so currently we need to store them as tweens then cleanup: Eg. Cleanup = [] cleanup.forEach((obj) => obj.revert()); cleanup.length = 0; cleanup.push(split1, split2); Do I need to storing tweens in an array inside of my gsap.registerEffect code? then return those tweens into the 'child code' or can I just leave the entire gsap.registerEffect untouched (preferrered as I access this a lot) and just modify the code that calls the register effect? Eg. "splitReveal" is a registered effect, in some child code. entrytl.splitReveal(".hero_text1", { rotation: 5 }, 0) .splitReveal(".hero_title", { rotation: 5 }, 0.2) .splitReveal(".hero_text2", { rotation: 5 }, 0.5); /** Below export const gsapEffectSplitReveal = () => { // Define the splitReveal effect gsap.registerEffect({ name: "splitReveal", extendTimeline: true, defaults: { rotation: 5, stagger: 0.2, duration: 2, ease: "power4.out", }, effect: (targets, config) => { let splitLines = new SplitText(targets, { type: "lines", linesClass: "split-child-lines" }); let splitMask = new SplitText(targets, { type: "lines", linesClass: "split-child-lines-mask" }); gsap.set(splitLines.lines, { transformOrigin: "bottom 0%" // Corrected syntax here }); return gsap.from(splitLines.lines, { opacity: 0, duration: config.duration, ease: config.ease, yPercent: 100, rotation: config.rotation, stagger: config.stagger }); } }); }; export const pageEntryAnimationFirst = () => { // Declare variables to store the timeline and cleanup function entrytl = gsap.timeline(); gsap.set('.hero_text', { transformOrigin: 'center center', }); entrytl.to('.hero', { yPercent: 0, clipPath: "polygon(0 0%, 100% 0%, 100% 100%, 0% 100%)", duration: 1, rotation: 0, ease: ease2, }); entrytl.set(".hero_text, .hero_title", { opacity: 1 }); entrytl.splitReveal(".hero_text1", { rotation: 5 }, 0) .splitReveal(".hero_title", { rotation: 5 }, 0.2) .splitReveal(".hero_text2", { rotation: 5 }, 0.5); entrytl.play(); }; No minimal demo on this one sorry, just hoping for a quick point in the right direction and I can build the code myself Thanks in advance. Link to comment Share on other sites More sharing options...
GreenSock Posted January 5 Share Posted January 5 42 minutes ago, Windpixel said: which from reading this forum, which as of ~Nov 22 aren't supported directly in via gsap.context for cleanup That statement confused me. SplitText is supported directly in gsap.context(). I don't see a reason for you needing to store references to all the instances. If you're running into a challenge or unexpected behavior, please do provide a minimal demo - that'll be a huge help in us wrapping our heads around what you're trying to do Link to comment Share on other sites More sharing options...
Windpixel Posted January 5 Author Share Posted January 5 1 minute ago, GreenSock said: That statement confused me. SplitText is supported directly in gsap.context(). I don't see a reason for you needing to store references to all the instances. Ahh ok, sorry, maybe i'm reading outdated forum context. So I should be able to just wrap everything in and it should be able to revert? I'll get working on a min dem. ctx = gsap.context(() => { // All splitText stuff }, ref.value); // Later do the cleanup ctx.revert(); Link to comment Share on other sites More sharing options...
Solution GreenSock Posted January 5 Solution Share Posted January 5 Yep, exactly. Perhaps there's some kind of complex scenario or edge case that you've got that'd need some extra elbow grease. When gsap.context() first came out, SplitText wasn't context-aware, but we resolved that relatively quickly. So just make sure you're using recent versions of GSAP/SplitText hopefully you should be golden. 👍 1 Link to comment Share on other sites More sharing options...
Windpixel Posted January 5 Author Share Posted January 5 1 minute ago, GreenSock said: Yep, exactly. Perhaps there's some kind of complex scenario or edge case that you've got that'd need some extra elbow grease. When gsap.context() first came out, SplitText wasn't context-aware, but we resolved that relatively quickly. So just make sure you're using recent versions of GSAP/SplitText hopefully you should be golden. 👍 Thanks Jack Link to comment Share on other sites More sharing options...
Windpixel Posted January 6 Author Share Posted January 6 Ok. I went away and played around and this works flawlessly. Ok, went away. All working fine. So to answer my questions, yep, you can gsap register effects elsewhere tap into them, use gsap.context for the clean up. I have window resize helper (Not shown which) will run the cleanup function and re-fire the setup. Its magic Thanks Jack export const pageEntryAnimationRevisit = () => { // Declare variables to store the timeline and cleanup function let entrytl; let playedAnimation = false; let firstVisit = false let ctxSplits; const playRevisitAnimation = () => { ctxSplits = gsap.context(() => { entrytl = gsap.timeline(); gsap.set('.hero_text', { transformOrigin: 'center center', }); entrytl.set(".hero_text, .hero_title", { opacity: 1 }); entrytl.splitReveal(".hero_text1", { rotation: 5 }, 0) .splitReveal(".hero_title", { rotation: 5 }, 0.2) .splitReveal(".hero_text2", { rotation: 5 }, 0.5); entrytl.play(); playedAnimation = true; firstVisit = false; }, content.value); }; const heroRevisitCleanup = () => { ctxSplits && ctxSplits.revert(); }; return { playRevisitAnimation, heroRevisitCleanup }; }; 1 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