Jump to content
Search Community

Need 1 more/extra scroll to show the content

Sajidul Islam test
Moderator Tag

Recommended Posts

Hi All,

 

I would loke to get help with an issue I'm facing. I'm new here and don't know for sure how to start on this.

So If you see the pen, the other content is showing just after the BG image fixed on the top. I don't want this- I want to fix the BG image first and keep the (title/subtitle) contents hidden. When user mouse-scroll one more time, the items will be fade in? Is it something possible with the scrollTrigger?

 

 

Any help would be appreciated.

 

 

Many Thanks,

Sajidul

See the Pen ZExejMr by sajidulislam0 (@sajidulislam0) on CodePen

Link to comment
Share on other sites

Quote

When user mouse-scroll one more time

 

We can't detect number of mouse scrolls with scrolltrigger. But right now you're starting your animation timeline and pinning the background at the same trigger point.

If you move the animation timeline start trigger further down the page it will start later than the background animation.

Alternately, add the background animation in to the same timeline as the rest of the animation and use the position parameter to space them apart.

 

Good luck!

Link to comment
Share on other sites

Sure!

 

You would first add the image animation to the timeline, then you can create a gap by using the position parameter.
 

tl.to(image, {...})
  // add a one second gap
  .to(nextAnimation, {...}, "+=1")


Here's a demo with more information on the different ways you can use the position parameter to position tweens on timelines.

See the Pen PopXddg?default-tab=result&editable=true&theme-id=41164 by GreenSock (@GreenSock) on CodePen

There's more information in this position parameter article.

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