Jump to content
Search Community

ScrollTrigger on variable width and height causing issues

Lionel Dsilva test
Moderator Tag

Recommended Posts

Hi I just started to use GSAP. I am facing some issues with implementation and hope this forum can help out.

I am trying to create a component that compares multiple products with different colors.

 

chrome_wYm3tJcCv1.png.cab8a5b049881952823c25d307ce5d8a.pngchrome_ZMBswRuLi4.png.d28a4cabf227bea7d263319febf1b858.png

 

 

These are the 2 separate variations. But when I try to implement this, I am facing some weird issues.

1. For different widths/heights, the animation starts somewhere in between and doesn't complete.

2. If I have a component above and below this one, the animation keeps going but the below component scrolls along with it.
3. The component doesn't take full height of the viewport.

4. If I try to add a separate tag for background, the background scrolls with the animation

 

desktop-1368.png.c3292878368eb2cc62c41a779b152145.pngdesktop-1920.png.d1e1fb5351090d650fb1d044ea5b77b6.pngdesktop-1920-with-content.thumb.png.d7e1e92159405d29154c7a620b8f289e.png

 

mobile.png.7a126a9c940fa6ed6bbeabca116ea3d1.png

 

If someone might be helpful that would be great. Thank you in advance.

See the Pen bGvLPqq by lioneldsilva (@lioneldsilva) on CodePen

Link to comment
Share on other sites

Hi there Lionel!

 

Welcome to the forums. Can you possibly help to clarify some things? (When you're deep in an animation it's hard to step back to explain sometimes! We don't have the context that you have in your head though, so try to explain it with that in mind.)

 

Quote

1. For different widths/heights, the animation starts somewhere in between and doesn't complete.

For different widths/heights of what? And in between what? How do we replicate this?
 

Quote

2. If I have a component above and below this one, the animation keeps going but the below component scrolls along with it.

This may be down to your PinSpacing settings - this video will help you understand how it works

 

pinSpacing - ScrollTrigger from GreenSock on Vimeo.
 

Quote

3. The component doesn't take full height of the viewport.

This sounds like a CSS/styling issue - if not could you elaborate a little?

 

Quote

4. If I try to add a separate tag for background, the background scrolls with the animation

What do you mean by separate tag for background, another HTML element? If so it sounds like that element needs to be pinned too or put inside a pinned container? Could you explain what the current behaviour is and what behaviour you're aiming to get?

Thanks!

 

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