Jump to content
Search Community

Scrolltrigger Miscalculates Triggers

blizve0 test
Moderator Tag

Recommended Posts

Hi Im using GSAP Scrolltrigger in my Projects

 

Setup

I have 2 divs, one above and one below.

I have applied pin animation in first div.

I have applied basic GSAP Scrolltrigger animation to the below div.

 

Hero is the relevant GSAP code for both Divs

First DIV

gsap.to(projectsSlideRef.current, {
x: -(scrollWidth - window.innerWidth),
ease: 'none',
scrollTrigger: {
trigger: '.projects-slide',
scrub: true,
start: 'top top',
end: () => '+=' + scrollWidth,
pin: '.projects-slide',
pinType: 'transform',
pinSpacing: true,
},
})

 

Second DIV

gsap.to(document.querySelectorAll(id), {
startAt: { transformPerspective: 1000, transformOrigin: 'center', rotationX: -90, y: '200%', opacity: 0 },
scrollTrigger: {
trigger: id,
},
opacity: 1,
y: '0%',
})

 

Problem

The Second DIV animation only works if first div is not present, if first div is present then scrollTrigger happens way before it should and till i scroll and reach the second div animation has been already occured.

Help please its getting hard to create a codepen as the project is really big

 
Link to comment
Share on other sites

Hi - most of the time it is impossible for us to help without a minimal demo. We're not magicians! Currently we have no context at all - this issue could be caused by some CSS, some markup, a third party library, your browser, an external script. 🤷🏼‍♀️ Endless reasons.

When we ask for a minimal demo - we mean minimal. We do not want to see your whole project.

Part of debugging is stripping back the issue to the bare essentials to find out where the problem lies.

Please make a demo with some simple divs, basic styling and the little bit of GSAP code you've linked to. If you can't recreate the issue by doing this then incrementally add code in, bit by bit until the issue occurs. Most of the time people manage to solve their own issues using this process. If not, then at least we have a reduced test case and a better idea of how to help.

Pasting a code snippet is quick and simple but it's not going to help us to help you at all

 

Thanks.

 

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