Jump to content
Search Community

ScrollTrigger 'top center - dynamic value'

redfawx test
Moderator Tag

Recommended Posts

Hi Everyone!


Was playing around with ScrollTrigger and was wondering if there's a way to responsively set the start of the animation a bit higher up from where the elements lay into the dom. As you can see in the screenshot below I have the markers enabled. The current scroll position is where all the stripes/element blocks are set to be visible during the scroll. Is there a good way to make sure that they are all faded in by the time the user has them in the view?


Thank you in advance! :) 

Screen Shot 2020-07-06 at 12.33.54 AM.png

Link to comment
Share on other sites

I read your question 3 times and I'm still fuzzy (possibly because I'm super tired). You have total control over where the starting and ending positions are. As far as being responsive, it already is responsive by its very nature. In other words, "top center" will always be where the top of the trigger element hits the center of the screen. When you resize, it recalculates those values automatically. You don't need to do anything special. But maybe I'm misunderstanding your question. 


Also, if you want things to fade in, for example, between the bottom of the screen and the center (so that by the time it hits the center it's always 100% faded in regardless of how fast the user scrolls), you can use scrub: true so that the progress of the animation is directly tied to the scrollbar's position. 


It would help a lot if you could provide a reduced test case (as reduced as humanly possible) so we can see the issue in context and better grasp what you're asking. A CodePen would be ideal. 

  • Like 1
Link to comment
Share on other sites

@GreenSock Hi Jack! Thanks so much for taking a look at this. Sorry for the confusion. Here is a live demo link:https://suturacreative.com/ What I'm trying to accomplish is to have all the stuff faded in before the marquee's hit the middle of the page. So essentially I would like it to start a bit before the top of the element. Is there a way to say start at the top of the div - 100px? I assume I could always set another target for the trigger but I would like to keep things isolated to the component I'm programming.



Below is the snippet of where I'm executing the animation: 

            scrollTrigger: {
              trigger: thisObj.$refs.marquee,
              start: 'top center',
              scrub: 1
              // markers: true
            x: '+=200',
            ease: Power3.easeOut,
            alpha: 0,
            duration: 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...