Lichay Posted July 5, 2020 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
mikel Posted July 6, 2020 Posted July 6, 2020 Hey @Lichay, You could also study the DOCs from the new GSAP scrollTrigger. 5
GreenSock Posted July 6, 2020 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
Lichay Posted July 6, 2020 Author Posted July 6, 2020 6 hours ago, GreenSock said: Yes, @mikel is right. Here are a few examples: thanks
Lichay Posted July 6, 2020 Author 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
GreenSock Posted July 6, 2020 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
Lichay Posted July 6, 2020 Author 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
ZachSaucier Posted July 6, 2020 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.
Lichay Posted July 6, 2020 Author 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
ZachSaucier Posted July 6, 2020 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
Lichay Posted July 6, 2020 Author 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
Lichay Posted July 15, 2020 Author 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 -
ZachSaucier Posted July 15, 2020 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
Lichay Posted July 15, 2020 Author 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
ZachSaucier Posted July 15, 2020 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.
Lichay Posted July 15, 2020 Author 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
ZachSaucier Posted July 15, 2020 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?
Lichay Posted July 15, 2020 Author 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.
ZachSaucier Posted July 15, 2020 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.
Lichay Posted July 15, 2020 Author 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.
ZachSaucier Posted July 15, 2020 Posted July 15, 2020 1 minute ago, Lichay said: like that? If it works, it works You don't need our approval.
Lichay Posted July 15, 2020 Author Posted July 15, 2020 Just now, ZachSaucier said: If it works, it works You don't need our approval. Ok thank you!!
Lichay Posted July 16, 2020 Author 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?
ZachSaucier Posted July 16, 2020 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.
Lichay Posted July 16, 2020 Author 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?
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