Lichay Posted July 5, 2020 Share Posted July 5, 2020 How to create parallax effect with gsap? Full parallax effect on text and background codepen or video be fine thank for help edit, no Jqury Link to comment Share on other sites More sharing options...
mikel Posted July 6, 2020 Share Posted July 6, 2020 Hey @Lichay, You could also study the DOCs from the new GSAP scrollTrigger. 5 Link to comment Share on other sites More sharing options...
GreenSock Posted July 6, 2020 Share Posted July 6, 2020 Yes, @mikel is right. Here are a few examples: See the Pen vYNNvMj by GreenSock (@GreenSock) on CodePen See the Pen QWjjYEw by GreenSock (@GreenSock) on CodePen See the Pen OJyPmgX by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
Lichay Posted July 6, 2020 Author Share Posted July 6, 2020 6 hours ago, GreenSock said: Yes, @mikel is right. Here are a few examples: thanks Link to comment Share on other sites More sharing options...
Lichay Posted July 6, 2020 Author Share Posted July 6, 2020 On 7/6/2020 at 12:03 AM, GreenSock said: Yes, @mikel is right. Here are a few examples: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js and https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js instead https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js and https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.4/ScrollTrigger.min.js because always i use them and when u replace it, it don't work Link to comment Share on other sites More sharing options...
GreenSock Posted July 6, 2020 Share Posted July 6, 2020 Just so you know, https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.4/ScrollTrigger.min.js is the WRONG file. That's a completely different library (not GreenSock). I think you meant https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js 2 Link to comment Share on other sites More sharing options...
Lichay Posted July 6, 2020 Author Share Posted July 6, 2020 1 hour ago, GreenSock said: Just so you know, https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.4/ScrollTrigger.min.js is the WRONG file. That's a completely different library (not GreenSock). I think you meant https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js no , in your link above you use the first . and on greensock i use the second option i don't undrstand it if I replace them it doesn't work Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 6, 2020 Share Posted July 6, 2020 2 minutes ago, Lichay said: no , in your link above you use the first . Which link are you talking about? 2 minutes ago, Lichay said: i use the second option i don't undrstand it if I replace them it doesn't work Please make a minimal reproduction of the issue using CodePen and share the link with us. Link to comment Share on other sites More sharing options...
Lichay Posted July 6, 2020 Author Share Posted July 6, 2020 3 minutes ago, ZachSaucier said: Which link are you talking about? Please make a minimal reproduction of the issue using CodePen and share the link with us. See the Pen gOPvErV by lichaytiram (@lichaytiram) on CodePen same code like above https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js and https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js instead https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js and https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.4/ScrollTrigger.min.js because always i use them and when u replace it, it don't work Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 6, 2020 Share Posted July 6, 2020 As @GreenSock already said, https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.4/ScrollTrigger.min.js is the incorrect file. It's not a GreenSock product at all. You should use the link that he said to use, https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js. Using it instead, your demo works as it should. 1 Link to comment Share on other sites More sharing options...
Lichay Posted July 6, 2020 Author Share Posted July 6, 2020 10 minutes ago, ZachSaucier said: As @GreenSock already said, https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.4/ScrollTrigger.min.js is the incorrect file. It's not a GreenSock product at all. You should use the link that he said to use, https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js. Using it instead, your demo works as it should. ohh when i type it codpen sent me wrong code thanks Link to comment Share on other sites More sharing options...
Lichay Posted July 15, 2020 Author Share Posted July 15, 2020 On 7/6/2020 at 12:03 AM, GreenSock said: Yes, @mikel is right. Here are a few examples: I have a problem . If i want regular div at top and middle how it work ? because it position fix and always at top . -I want my first picture be at top without peralax - Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 15, 2020 Share Posted July 15, 2020 Use CSS to reposition the fixed parts to be further down. Let us know if you have a specific question related to GSAP and we're happy to help Link to comment Share on other sites More sharing options...
Lichay Posted July 15, 2020 Author Share Posted July 15, 2020 5 minutes ago, ZachSaucier said: Use CSS to reposition the fixed parts to be further down. Let us know if you have a specific question related to GSAP and we're happy to help but if i change it to another position it won't work Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 15, 2020 Share Posted July 15, 2020 Have you tried starting from any of the other parallax demos in the ScrollTrigger docs that Jack embedded above? There are several other demos that don't use fixed positioning but still have parallax effects. Link to comment Share on other sites More sharing options...
Lichay Posted July 15, 2020 Author Share Posted July 15, 2020 21 minutes ago, ZachSaucier said: Have you tried starting from any of the other parallax demos in the ScrollTrigger docs that Jack embedded above? There are several other demos that don't use fixed positioning but still have parallax effects. but after i want it disable again and work again [] = div [nope] [work] [work] [nope] [work] something like that Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 15, 2020 Share Posted July 15, 2020 1 minute ago, Lichay said: but after i want it disable again and work again [] = div [nope] [work] [work] [nope] [work] something like that Sorry, I don't have any idea what that is supposed to mean. Can you try to rephrase? Link to comment Share on other sites More sharing options...
Lichay Posted July 15, 2020 Author Share Posted July 15, 2020 1 minute ago, ZachSaucier said: Sorry, I don't have any idea what that is supposed to mean. Can you try to rephrase? i want my parallax will work only in some place in my page not from start like that . 'after green page' See the Pen gOPvErV by lichaytiram (@lichaytiram) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 15, 2020 Share Posted July 15, 2020 Like I said before, you could just reposition the fixed elements (change the top values to larger ones). Alternatively you could use one of the other methods that we've already linked to and embedded. For example: See the Pen rNxqBwK?editors=1000 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Lichay Posted July 15, 2020 Author Share Posted July 15, 2020 6 minutes ago, ZachSaucier said: Like I said before, you could just reposition the fixed elements (change the top values to larger ones). Alternatively you could use one of the other methods that we've already linked to and embedded. For example: like that? See the Pen gOPvErV by lichaytiram (@lichaytiram) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 15, 2020 Share Posted July 15, 2020 1 minute ago, Lichay said: like that? If it works, it works You don't need our approval. Link to comment Share on other sites More sharing options...
Lichay Posted July 15, 2020 Author Share Posted July 15, 2020 Just now, ZachSaucier said: If it works, it works You don't need our approval. Ok thank you!! Link to comment Share on other sites More sharing options...
Lichay Posted July 16, 2020 Author Share Posted July 16, 2020 16 hours ago, ZachSaucier said: If it works, it works You don't need our approval. i don't understand why i do so much problems. watch it See the Pen gOPvErV by lichaytiram (@lichaytiram) on CodePen it already inside gray area and isn't start after i scroll under this area how can I change it? Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 16, 2020 Share Posted July 16, 2020 Your ScrollTrigger is set to start at the very beginning of the page. If you want it to start later, then you must change the start value accordingly. Please read the documentation, watch the video, and try to understand how it works. It will save you time and headache in the long run. Link to comment Share on other sites More sharing options...
Lichay Posted July 16, 2020 Author Share Posted July 16, 2020 2 hours ago, ZachSaucier said: Your ScrollTrigger is set to start at the very beginning of the page. If you want it to start later, then you must change the start value accordingly. Please read the documentation, watch the video, and try to understand how it works. It will save you time and headache in the long run. See the Pen gOPvErV by lichaytiram (@lichaytiram) on CodePen If you meant this , it work properly Thanks Have another way? 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