Jump to content
Search Community

I try to make a delay on scrollTrigger

handred0008 test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi there!

I forked the official example and make this codepen demo

there are two color boxes in a pinned scene(background image)

the problem is I can't figure out the position of start point (how it work)

 

pink box works as I expected

//this is pink box
ScrollTrigger.create({
  trigger: ".massiveImage",
  start: "-50px top",
  end: () => innerWidth * 3,
  scrub: true,
  markers: {startColor: "pink"},
  animation: pinkTl
});

.massiveImage positionY - 50px hit viewport top

 

but I have no idea what happened on blue box

//this is blue box
ScrollTrigger.create({
  trigger: ".massiveImage",
  start: "50px top",
  end: () => innerWidth * 3,
  scrub: true,
  markers: {startColor: "skyblue"},
  animation: blueTl
});

what I expect is .massiveImage positionY + 50px hit viewport top

look like this:

1MdPj6F.jpg

but start point of blue is at a wired position (you can check the demo , I turn on the markers)

 

is there anyone could explain what happened on this demo?  and how should I achieve effect like image above ?

 

 

 

 

See the Pen poNKjVZ?editors=0010 by handred800 (@handred800) on CodePen

Link to comment
Share on other sites

  • Solution
1 hour ago, handred0008 said:

but start point of blue is at a wired position (you can check the demo , I turn on the markers)

 

is there anyone could explain what happened on this demo?  and how should I achieve effect like image above ?

 

Hey @handred0008

 

I don't think it is in a weird position but exactly where you tell it to.

Since the triggers for both those elements are set to '.massiveImage' and you are pinning that massiveImage, the blue will only get triggered when the massiveImage has been scrolled 50px past the top of the window - which will only happen after the massiveImage gets unpinned - and that is where you can see the marker for the blue box.

 

One way to get the effect you want could be to wrap the massivImage with a div and use that div as the trigger for your pink and blue timeline/ScrollTriggers.

This way ScrollTrigger will apply the pin-spacer inside that wrap which results in the image still being pinned but the wrap keep being scrolled and thus suitable for being used as a trigger for your attempt. 

 

See the Pen 582d722cc57426e1d7141c09766fd04f by akapowl (@akapowl) on CodePen

 

Hope this helps :) 

 

 

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