Jump to content
Search Community

How to create parallax effect with gsap?

Lichay test
Moderator Tag

Recommended Posts

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

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

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

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

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

  • 2 weeks later...
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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...