Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Yunus Emre

ScrollTrigger reveal elements one by one on entering and leaving scroller area

Go to solution Solved by GreenSock,

Recommended Posts

Sorry if this is a logic problem here.

I want to show only "text 1" once it entered scroller area and keep "text 2" waited until "text 1" leaves the scroller area. 

When "text 1" leaves the scroller area, I want "text 2" to enter the scroller area at the same time.

How can I achieve this?

See the Pen KKmyjNp by ynsmrsk (@ynsmrsk) on CodePen

Link to comment
Share on other sites

I'm not entirely sure how you want this to work exactly because I see you've got scrub: 1 in your code but you're creating independent animations inside callbacks (those don't really go together). Plus logically-speaking, you can't have your trigger points set to 30% and 70% AND ALSO make 2nd element only fade in as the first one is fading out unless the screen is exactly a certain height that'd happen to line those up perfectly. So you'd have to decide if you want those trigger points or if you want the sequenced animations where both are never opacity: 1 at the same time. And you've gotta decide if you want your animation hard-linked to the scrollbar position (scrub) or to imply fire independently. 

 

Here's an example that shows each element fading in when it hits 70% and then fading out when it hits 30%: 

See the Pen yLbpLae by GreenSock (@GreenSock) on CodePen

 

Does that help?

  • Like 2
Link to comment
Share on other sites

Thanks for the answer Jack!

7 hours ago, GreenSock said:

I see you've got scrub: 1 in your code but you're creating independent animations inside callbacks

 

As you said I realized scrub is unnecessary for this type of animation.

And looping through each element using forEach must be the solution.

 

7 hours ago, GreenSock said:

So you'd have to decide if you want those trigger points or if you want the sequenced animations where both are never opacity: 1 at the same time.

 

I can give up using trigger points if it's logic don't go well with the sequenced animations but what I'm trying to achieve is the animation like on Apple's AirPods Max website.

 

 

If I must make this animation without using trigger points I'm totally okay with that but don't know how to do it anyway.

 

I edited the code like this but can't go further.

See the Pen gOWoryK?editors=0010 by ynsmrsk (@ynsmrsk) on CodePen

 

 

 

Link to comment
Share on other sites

  • Solution
14 hours ago, Yunus Emre said:

I can give up using trigger points if it's logic don't go well with the sequenced animations but what I'm trying to achieve is the animation like on Apple's AirPods Max website.

Trigger points aren't a problem at all. In fact, every ScrollTrigger needs trigger points. I didn't really understand your comment. 

 

14 hours ago, Yunus Emre said:

I edited the code like this but can't go further.

What else do you want? What isn't working the way you wanted? 

 

You can definitely accomplish exactly the same thing as that Apple site using ScrollTrigger. 

 

I think you're probably overcomplicating things quite a bit. Did you look at the demo I provided? It's much simpler. 

See the Pen yLbpLae?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you need to tweak the trigger positions so that only one is active at any time, you can just measure the distance between your elements and use those to offset things appropriately like this: 

See the Pen poPpWXM?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Thanks 1
Link to comment
Share on other sites

14 hours ago, GreenSock said:

What else do you want? What isn't working the way you wanted?

14 hours ago, GreenSock said:

If you need to tweak the trigger positions so that only one is active at any time, you can just measure the distance between your elements and use those to offset things appropriately

Yes! that did the trick. But in this way trigger area can be narrow due to size of the element. For example when font-size set to 16px, between the scrolltrigger area narrowses so much and there is not remain enough space to scroll.

Setting a padding solved the problem. I think javascript could handle it without tricky ways but this is fine too.

 

14 hours ago, GreenSock said:

I think you're probably overcomplicating things quite a bit. Did you look at the demo I provided? It's much simpler. 

Yes but what I want to do is mimic that airpods max animation. So I gotta slide in/out text when entering and leaving the trigger area.

I tried using toggleActions but didn't get exactly what I wanted.

 

You can see the problem here:

See the Pen PomErRV?editors=0010 by ynsmrsk (@ynsmrsk) on CodePen

 

So I did it like this and it's almost perfect now:

See the Pen PomEvLR?editors=0010 by ynsmrsk (@ynsmrsk) on CodePen

 

Thanks for all the help!

 

Link to comment
Share on other sites

Sure. There are other ways you could accomplish it too, but I don't want to confuse things if you've already got something you're happy with. Let us know if you have any other GSAP-specific questions. Have fun!

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

×