Jump to content
Search Community

ScrollTrigger animation is happening after scrolling down the page

bootstrap007 test
Moderator Tag

Recommended Posts

Hi,

 

As you can see from the Codepen demo that ScrollTrigger animation is visible on the viewport only after scrolling down the page. Please refer to the attached screenshot for reference. How to make the viewport stay remain in the same position until the animation completes and clearly visible on the viewport then the page can scroll down further like in ScrollMagic?

 Same like the (https://scrollmagic.io/) Hat and then the magic stick is coming down with some effect then the text animation then after that only the viewport scrolls down.

 

1103698913_ScreenShot2021-08-11at12_03.48PMcopy.thumb.jpg.c2a365028dc0447e5744e5665e7c82e7.jpg

See the Pen NWjeobY by bootstrap007 (@bootstrap007) on CodePen

Link to comment
Share on other sites

Hi bootstrap, 

 

Have you looked at pin?

 

Quote
pin Boolean | String | Element - An element (or selector text for the element) that should be pinned during the time that the ScrollTrigger is active, meaning it will appear to "stick" in its starting position while the rest of the content continues scrolling underneath it. Only one pinned element is allowed, but it can contain as many elements as you want. Setting pin: true will cause it to pin the trigger element. Warning don't animate the pinned element itself because that will throw off the measurements (ScrollTrigger is highly optimized for performance and pre-calculates as much as possible). Instead, you could nest things such that you're animating only elements INSIDE the pinned element.

 

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