swatip Posted March 25, 2020 Share Posted March 25, 2020 Hi, I am trying do text reveal animation on scroll like below website but its not working https://bepatrickdavid.com/ can anyone please help me Thanks in advance Link to comment Share on other sites More sharing options...
mikel Posted March 25, 2020 Share Posted March 25, 2020 Hey @swatip, You could use intersectionObserver for example. Here is a nice tutorial. Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
swatip Posted March 25, 2020 Author Share Posted March 25, 2020 Thank you but i want to create text animation like that example Link to comment Share on other sites More sharing options...
mikel Posted March 25, 2020 Share Posted March 25, 2020 Hey SWATIP, Instead of the bars (in the tutorial) you could use text objects. You can of course tween the animations with GSAP. Try a test via codePen. Happy tweening ... Mikel 1 Link to comment Share on other sites More sharing options...
swatip Posted March 25, 2020 Author Share Posted March 25, 2020 Yeah i'll try thank you 1 Link to comment Share on other sites More sharing options...
swatip Posted March 27, 2020 Author Share Posted March 27, 2020 Hi, I am trying to do following effect using GSAP See the Pen KaGoyq by michielvandewalle (@michielvandewalle) on CodePen This is my codepen: See the Pen LYVMEag by swatiparge (@swatiparge) on CodePen I am working on this since moday can anyone help me please? Thank you in advacne 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 27, 2020 Share Posted March 27, 2020 Hey swatip. The trick to this is to actually split the text into lines twice so that you have have a container for each line that is able to hide the text: See the Pen YzXdwaR?editors=0010 by GreenSock (@GreenSock) on CodePen Notice that I added a couple of classes and CSS to make the effect. We highly recommend using GSAP 3 formatting 9 Link to comment Share on other sites More sharing options...
swatip Posted March 27, 2020 Author Share Posted March 27, 2020 Thank you sooo much Link to comment Share on other sites More sharing options...
Shrug ¯\_(ツ)_/¯ Posted March 27, 2020 Share Posted March 27, 2020 As Zach stated you should be using GSAP 3 especially if you are new to using GreenSock. But if for whatever reason you are restricted to version 2 then here is an older post showing the same result. 2 Link to comment Share on other sites More sharing options...
swatip Posted March 27, 2020 Author Share Posted March 27, 2020 Thank you. Its been only 1 or 2 months I have started using GSAP . so i'm kinda new to GSAP Link to comment Share on other sites More sharing options...
swatip Posted April 2, 2020 Author Share Posted April 2, 2020 Hi, I added text reveal animation to paragraph and heading but i am having issue with paragarph animation which has multiple lines. After adding that animation to Paragraph it's cutting the text in between. I checked spliting text into chars, words, lines but its still not working Can anyone please help? Thank you in advance Link to comment Share on other sites More sharing options...
mikel Posted April 2, 2020 Share Posted April 2, 2020 Hey @swatip, Without watching your case live - in a CodePen - it is difficult to help you. If the point is resize, check out this post. Link to comment Share on other sites More sharing options...
swatip Posted April 2, 2020 Author Share Posted April 2, 2020 Hey @mikel Yeah i am having the same issue with responsive. Its not wrapping automatically Link to comment Share on other sites More sharing options...
mikel Posted April 2, 2020 Share Posted April 2, 2020 Hey @swatip, And did you try function allDone() { mySplitText.revert(); } Hey @ZachSaucier, Is there a chance to revert the revert to play the animation again? See the Pen mdJgwbN by mikeK (@mikeK) on CodePen Happy tweening ... Mikel Link to comment Share on other sites More sharing options...
swatip Posted April 2, 2020 Author Share Posted April 2, 2020 Hey @mikel, I have tried but its still not wokring. Link to comment Share on other sites More sharing options...
mikel Posted April 2, 2020 Share Posted April 2, 2020 Hey @swatip, As I said: without watching your case live - in a CodePen - it is difficult to help you. Kind regards Mikel Link to comment Share on other sites More sharing options...
swatip Posted April 2, 2020 Author Share Posted April 2, 2020 Hey @mikel, Here is my work demo link: https://whitenoise.design/TIF/ Please check Link to comment Share on other sites More sharing options...
mikel Posted April 2, 2020 Share Posted April 2, 2020 Hey @swatip, Please look in the DevTools: 'ReferenceError: mySplitText is not defined'. You need a correct reference. Happy controlling ... Mikel 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 2, 2020 Share Posted April 2, 2020 5 hours ago, mikel said: Hey @ZachSaucier, Is there a chance to revert the revert to play the animation again? Not the same one, no. .revert() removes the effect of the SplitText so you need to recreate that and thus the animation again. I recommend putting it in a function to do so: See the Pen qBdwJyo?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
david_br Posted September 29, 2020 Share Posted September 29, 2020 On 3/27/2020 at 1:16 PM, ZachSaucier said: Hey swatip. The trick to this is to actually split the text into lines twice so that you have have a container for each line that is able to hide the text: Notice that I added a couple of classes and CSS to make the effect. We highly recommend using GSAP 3 formatting I was having similar issues trying to create this reveal effect by line. I found the old post referenced by Shrug and then found this solution written in GSAP 3 formatting... exactly what I was looking for, only the pen isn't working. At least when I try and run it. Has this been adjusted since creation? Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 29, 2020 Share Posted September 29, 2020 @david_br For some reason it doesn't like the type: "lines" in the second SplitText. You can leave it out and it works fine but we'll investigate the issue. Link to comment Share on other sites More sharing options...
balaurul Posted February 4, 2021 Share Posted February 4, 2021 Hello everybody! I need a little help with something similar to @swatip. The word "Breathe" to appear and dissapear (translated down) and also be replaced by an array of other words 'Inhale', 'Exhale', 'Breathe' etc I'm new to JS and GSAP so any kind of advice will help! https://codepen.io/balaurul/pen/BaQoVmE#code-area Thanks in advance! Link to comment Share on other sites More sharing options...
GreenSock Posted February 4, 2021 Share Posted February 4, 2021 Welcome to the forums, @balaurul. It's typically best to just start your own thread, just for future reference. Unfortunately we just don't have the resources to provide free general consulting help but here are some pointers that might get you moving in the right direction: Don't use pseudo elements - they can't be directly animated via JS. You could create all the words, each in their own <div>, all with a class applied like "word". Put them into a container <div> that's positioned wherever you want, with overflow: hidden. Set the ".word" <div> elements to position: absolute so they're all stacked on top of each other. gsap.set(".word", {yPercent: 110}) to push them off the bottom (outside the container) so they're invisible. Now you can just do a staggered animation that animates them to yPercent: 0 and then yPercent: -110. Give it a shot in CodePen and if you run into trouble with any GSAP-specific stuff, start a new thread here and we'd be happy to help. Good luck! 5 Link to comment Share on other sites More sharing options...
deepuiux Posted April 30, 2021 Share Posted April 30, 2021 On 3/27/2020 at 6:46 PM, ZachSaucier said: Hey swatip. The trick to this is to actually split the text into lines twice so that you have have a container for each line that is able to hide the text: Notice that I added a couple of classes and CSS to make the effect. We highly recommend using GSAP 3 formatting Hello Sir I am new to GSAP Can you please tell me how can i do this animation with scrolltrigger Thank you so much in advance Link to comment Share on other sites More sharing options...
GreenSock Posted April 30, 2021 Share Posted April 30, 2021 2 hours ago, deepuiux said: I am new to GSAP Can you please tell me how can i do this animation with scrolltrigger Welcome to the forums, @deepuiux. Can you please be a little more specific? Do you want to scrub it back and forth with the scrollbar position? Do you just want to trigger the effect when the scroll hits a certain point (and then never revert)? There are many, many options. I'd strongly recommend watching the video, reading the docs, and looking at the demos: https://greensock.com/docs/v3/Plugins/ScrollTrigger https://greensock.com/st-demos/ 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