Alphamark Posted January 19, 2023 Share Posted January 19, 2023 The sentences on the right fill up when the "Sysfacts" word aligns with them, and reversing to lower opacity when it leaves. Not always, but sometimes the timeline.reverse() isn't reversing fully. You can see what i mean in the screenshot below I'm using scrolltrigger and splittext I'm sorry i don't know how to replicate it in codepen but here is my code const splittedText = SplitText.create(text, { type: "words chars" }) gsap.set(splittedText.chars, { opacity: 0.05, }) const sentencesAnimation = gsap.timeline({ scrollTrigger: { trigger: sentence, start: "40px center", end: "bottom-=40px center", onLeave: ()=> sentencesAnimation.reverse(), onEnterBack: ()=> sentencesAnimation.play(), onLeaveBack: ()=> sentencesAnimation.reverse(), }, }) .to(splittedText.chars, { opacity: 1, duration: 0, stagger: 0.01, }) }) See the Pen qBypONb by Bobiman (@Bobiman) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted January 19, 2023 Share Posted January 19, 2023 Hi @AntonioSt and welcome to the GreenSock forums! First thanks for being a Club GreenSock member and supporting GreenSock! It's really hard for us to debug something based on a snippet and an image. You can fork this codepen and make it look like your setup: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen Just keep it as small and simple as possible. No need to add your entire site code, just the pertinent part. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Alphamark Posted January 20, 2023 Author Share Posted January 20, 2023 Hey @Rodrigo , I've managed to add a codepen. Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 20, 2023 Share Posted January 20, 2023 I couldn't find your issue in your pen, but did you know that you can use the toggleActions property for what you're doing with the call backs String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". From the docs https://greensock.com/docs/v3/Plugins/ScrollTrigger I don't know on the top of my head, but maybe this is more performant. See the Pen wvxpKQQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Where there any steps to reproduce the issue like the following I am expecting the purple div to spin 360degrees the purple div only spins 90deg Open the demo on mobile in IOS safari and scroll down to the grey container 1 Link to comment Share on other sites More sharing options...
Alphamark Posted January 20, 2023 Author Share Posted January 20, 2023 Hello @mvaneijgen , the issue doesn't happen all the time, but here i caught it in your pen too Thank you about the advice for toggleActions btw. Link to comment Share on other sites More sharing options...
mvaneijgen Posted January 20, 2023 Share Posted January 20, 2023 I see it now, can you maybe provide your browser version. I'm on Safari 16 and there it never happens, but in Chrome 109.0.5414.87 it does. For me it only happens when I flick my scroll wheel really fast, so if you have a better description on how to reproduce the issue, that would be really helpful Link to comment Share on other sites More sharing options...
Alphamark Posted January 20, 2023 Author Share Posted January 20, 2023 I'm on Chrome 109.0.5414.75 and it doesn't matter if i scroll fast or slow it just happens sometimes, and only the first letter is left out. I can't see why, I changed the callbacks to toggleAction and it still happens. Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted January 20, 2023 Solution Share Posted January 20, 2023 I've took a better look at your setup, I've never used a 0 duration tween, so I changed it to 0.1 and now I can't seem to reproduce the issue anymore. See the Pen LYBeGVO?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen 1 1 Link to comment Share on other sites More sharing options...
Alphamark Posted January 20, 2023 Author Share Posted January 20, 2023 (edited) Ah I see, but is there any other way to reproduce the typewriter like effect, because with 0.1 duration it has like a fade. Edit: Nevermind, I just put the duration to 0.0001 and it works. Thank you a LOT Edited January 20, 2023 by Bobiman13 Nevermind 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