Jump to content
Search Community

How to create parallax effect with gsap?

Lichay
Moderator Tag

Recommended Posts

Posted

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

Posted

 

Hey @Lichay,

 

You could also study the DOCs from the new GSAP scrollTrigger.

  • Like 5
Posted
6 hours ago, GreenSock said:

Yes, @mikel is right. Here are a few examples:

 

 

 

 

 

 

thanks

 

Posted
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

Posted
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
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.

Posted
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

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

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 :) 

Posted
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

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.

Posted
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
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?

Posted
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

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.

Posted
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
1 minute ago, Lichay said:

like that?

If it works, it works :) You don't need our approval.

Posted
Just now, ZachSaucier said:

If it works, it works :) You don't need our approval.

Ok thank you!!

Posted
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

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.

Posted
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?

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...