Jump to content
Search Community

Parallax Elements at Different Speed

Dennyno test
Moderator Tag

Recommended Posts

Hi all, I am new at GSAP, even I love this framework and I've always seen many Codepens with it.

I set this script on my website: https://whynot.media/2020/su-di-noi/ 

 

gsap.to(".parallax_speed2", { //img
  yPercent: -200,
  ease: "none",
  scrollTrigger: {
    trigger: ".contenitore_parallax", //container
    scrub: true
  }, 
});

 

To make the middle image you can see at bottom to scroll slower (or faster) than 2 others. But my script gives an undefined.
Could someone help please?

 

Link to comment
Share on other sites

 

Hey @Dennyno

 

It looks like you don't have a 'contenitore_parallax' in your HTML.

What you have, is a 'contenitore-parallax' though.

 

Looks like you might have simply made a typo.

 

If correcting it doesn't resolve your issue, please provide a minimal demo of the issue you are experiencing.

 

Hope this helps - and welcome to the forums :)

 

Cheers,

Paul

 

 

  • Like 4
Link to comment
Share on other sites

Hi, thank you for your help.

Yep it was a typo, thanks.

But even with the right class, it seems not working.

The element moves up, but stay there, is not moving as parallax.

Could this been caused because my body is not moving, but instead I have  a container that already is based on gsap? The container's classname is "scroll-content" which already has its transform-translate3D onscroll (by gsap) ?

 

gsap issues.png

Link to comment
Share on other sites

Hey @Dennyno

 

The transform-translate3D you have on your scroll-content container is not applied by GSAP, but by the smooth-scrollbar plugin you are using (just like the container itself is part of that plugin). To me it sounds like you are not using ScrollTrigger's .scrollerProxy to hook the smooth-scroll up to ScrollTrigger.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

 

 

 

But I cannot tell for sure, because guessing blindly is hard to do.

As Zach and I already pointed out; if you need furhter assistance on this, please make a minimal demo.

 

 

  • Like 3
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...