Jump to content
Search Community

Change Scroll Direction From BottomLeft To UpperRight Angle - ScrollTrigger

s-jay test
Moderator Tag

Recommended Posts

Hello Everyone,

I'm tying to get  the same effect like this:

https://brand.denso.com/en/

 

I am a beginner with GSAP as well as ScrollTrigger.  I have tried It like the codepen demo down below , I could change the angle for sliding to upperleft  but  that is not working properly.

 

Please help me to archive this effect using GSAP and ScrollTrigger.

 

Thanks,

See the Pen ExQJzrx by sj-jay (@sj-jay) on CodePen

Link to comment
Share on other sites

If I look at the demo that is more looking like a slider than something that works on scroll. If I scroll and then scroll back the animation doesn't care it will just finish playing the first animation until it's done. That is something the

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

can do. There you can look for scroll, swipe, touch events to trigger animations. But it is certainly possible with ScrollTrigger, but will feel a lot different.

 

I've removed some code from your demo a now every section moves to the upper left. The issue now is that every section has it's own scroll trigger and you want them to show per 2 slides. A great way to start with ScrollTrigger is to remove ScrollTrigger and just focus on the animation and only when you are happy with the animation add ScrollTrigger back in. 

 

See the Pen PoQgMzr?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

A few days ago someone had a issue that with the solution probably looking the same for your pen see here 

 

 

I would start by creating a timeline and adding all the sections to it. I think you need to stack them all on top of each other with CSS. Like in the previous thread you have to play with the position parameter to have animation start at the same time. Remove ScrollTrigger until you have a animation you are happy with and only then add it back in!

 

  • Like 3
Link to comment
Share on other sites

 

Welcome to the GSAP forum @s-jay!

 

@mvaneijgen is absolutely right. That website you mentioned doesn't listen to or use native browser scrolling at all, they just listen to relevant events.

 

And as he also said, GSAP's Observer Plugin can come in really handy with exactly that part, the listening for events - but all the rest of the logic for how to handle things when the events occur, would be up to you. So beyond knowing GSAP you will likely have to have a good grasp of JS in general, for creating logic to handle all possible sorts of scenarios you may run into with something like this.

 

Here is just a rather basic approach to maybe help you get started - happy tweening!

 

See the Pen zYRXgxz by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

15 minutes ago, mvaneijgen said:

If I look at the demo that is more looking like a slider than something that works on scroll. If I scroll and then scroll back the animation doesn't care it will just finish playing the first animation until it's done. That is something the

can do. There you can look for scroll, swipe, touch events to trigger animations. But it is certainly possible with ScrollTrigger, but will feel a lot different.

 

 

I've removed some code from your demo a now every section moves to the upper left. The issue now is that every section has it's own scroll trigger and you want them to show per 2 slides. A great way to start with ScrollTrigger is to remove ScrollTrigger and just focus on the animation and only when you are happy with the animation add ScrollTrigger back in. 

 

 

 

 

A few days ago someone had a issue that with the solution probably looking the same for your pen see here 

 

 

I would start by creating a timeline and adding all the sections to it. I think you need to stack them all on top of each other with CSS. Like in the previous thread you have to play with the position parameter to have animation start at the same time. Remove ScrollTrigger until you have a animation you are happy with and only then add it back in!

 

Hello mvaneijgen ,

 

thanks for your time.

I check your pen and suggestion.

I'll try to focus on animation first.
I appreciate your help :)

Link to comment
Share on other sites

15 minutes ago, akapowl said:

 

Welcome to the GSAP forum @s-jay!

 

@mvaneijgen is absolutely right. That website you mentioned doesn't listen to or use native browser scrolling at all, they just listen to relevant events.

 

And as he also said, GSAP's Observer Plugin can come in really handy with exactly that part, the listening for events - but all the rest of the logic for how to handle things when the events occur, would be up to you. So beyond knowing GSAP you will likely have to have a good grasp of JS in general, for creating logic to handle all possible sorts of scenarios you may run into with something like this.

 

Here is just a rather basic approach to maybe help you get started - happy tweening!

 

 

 

 

Hello @akapowl,

thanks for your time.

 

I check your pen and I think it's  the closest  to what i want.

i'll try to improve using Observer plugin in this Example.

 

I appreciate your help :)

 

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