Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
AkhilRaja

GSAP ScrollTrigger Horizontal Scroll Timeline Animation

Recommended Posts

I created a horizontal scroll website and then i want to create Gsap timeline animation by setting SectionB as the trigger element for the scrub animation as [trigger: "#SectionB"] and [start: "0% 100%", end: "100% 0%",] will be starting and end point.

my problems
- I can not set markers [start: "0% 100%", end: "100% 0%",] on #SectionB
- I can not create animation start at SectionB Left Most Side and End at SectionB Rigt Most Side

if anyone can help me set markers at SectionB as [start: "0% 100%", end: "100% 0%",] I can achieve my goal

Thank You

See the Pen PopdVMe by AkhilRaja (@AkhilRaja) on CodePen

Link to comment
Share on other sites

Hello and welcome to the forums @AkhilRaja.

 

Since you are not actually scrolling horizontally but only just faking horizontal scroll-behaviour with a tween on vertical scroll, you can not use the horizontal property of ScrollTrigger and have to calculate the start and end yourself.

 

Here is the demo from the demos-section showcasing that

 

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

 

 

Here you'll find a more detailed explanation about why it is neccessary to include an offset in your calculations

 

 

 

 

And here is what that would look like in your example with the start and end as you mentioned

 

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

 

 

 

Hope this helps get a better understanding.

Happy scrolling :) 

 

  • Like 5
Link to comment
Share on other sites

55 minutes ago, akapowl said:

Hello and welcome to the forums @AkhilRaja.

 

Since you are not actually scrolling horizontally but only just faking horizontal scroll-behaviour with a tween on vertical scroll, you can not use the horizontal property of ScrollTrigger and have to calculate the start and end yourself.

 

Here is the demo from the demos-section showcasing that

 

 

 

 

 

Here you'll find a more detailed explanation about why it is neccessary to include an offset in your calculations

 

 

 

 

And here is what that would look like in your example with the start and end as you mentioned

 

 

 

 

 

 

Hope this helps get a better understanding.

Happy scrolling :) 

 

Thank u sir for telling me importance of OffSet and ill work on this 😊,

and also sir can u tell me when i can use horizontal: true what should i do to work with this, i want to try this and i also want to see my Markers at #SectionB Left Start and Right End Point so i can have more easy control on the animation, like sometimes we want to use start: "35% 52%",   or any other values to set a start and end point for an animation

Link to comment
Share on other sites

 

48 minutes ago, AkhilRaja said:

and also sir can u tell me when i can use horizontal: true what should i do to work with this

 

Well, you'll want to use browser-native horizontal scrolling.

There is an example in the thread I linked to before.

 

 

  • Like 2
Link to comment
Share on other sites

thank you ill work on it 😊

Link to comment
Share on other sites

Please test on mouse with a wheel before implementing horizontal scrolling. It's probably not a good idea.

 

  • Thanks 1
  • Haha 1
Link to comment
Share on other sites

  • 2 months later...

Hi there. I am new here and am having trouble trying to get the elements of each of the sections to pin. I would appreciate a little help for a newbie like me.

 

See the Pen KKqgOBJ by enekodev (@enekodev) on CodePen

 

Link to comment
Share on other sites

Welcome to the forums, @eneko.dev. I glanced at your demo and read your question but I'm pretty lost as to what you're trying to do - can you please elaborate a bit? Or better yet, provide a sample URL with a similar effect? Have you already looked through the ScrollTrigger demos to see if there's anything similar you could pull from? 

Link to comment
Share on other sites

 

Since you are not actually scrolling horizontally, but only emulating/faking a horizontal scroll with a tween, you will not be able to simply just pin things within that horizontal fake scroll, @eneko.dev. If you want to be able to simply just set a pin: true, you would have to set up your project to use browser native horizontal scrolling (there's an example for that linked in my latest reply).

 

With the right setup, you could also fake a pin within that fake-horizontal scroll by calculating where/when to stop the tween for individual elements you are tweening to the left - but it is rather complicated and not the easiest to wrap your head around, especially when you are new to all that.

 

Here is a thread showing what I mean

 

 

 

  • Like 3
Link to comment
Share on other sites

On 9/6/2021 at 7:08 AM, GreenSock said:

Welcome to the forums, @eneko.dev. I glanced at your demo and read your question but I'm pretty lost as to what you're trying to do - can you please elaborate a bit? Or better yet, provide a sample URL with a similar effect? Have you already looked through the ScrollTrigger demos to see if there's anything similar you could pull from? 

 

Sorry to answer earlier. I share with you what I am working on in the next CodePe. The idea is that, when the car passes through the BikeOMatik tunnel, the car becomes a bike (in another image).

 

See the Pen powEMZY by enekodev (@enekodev) on CodePen

Link to comment
Share on other sites

3 hours ago, nico fonseca said:

@eneko.dev  You can achieve this by using two different .characters and start/end move depending on "bikeOMatic" position. 🙂
 

 

 

Thank you very very much. You have helped me a lot. I understand the solution. ;) 

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...
On 9/10/2021 at 4:58 AM, eneko.dev said:

 

Thank you very very much. You have helped me a lot. I understand the solution. ;) 

 

The problem is that it does not work correctly on mobile ... the character does not move at the same speed as on desktop and the scroll does not reach the end.

 

I do not understand what is happening ...

Link to comment
Share on other sites

Hello Eneko -

It seems to work like expected for me - but the car is wider than the screen,


Maybe if you make the car fit that moving element width-wise it would work as expected?
 

.character-container img {
  max-width: 100%;
}


Apologies for the lack of demo @nico fonseca's pen is private so I can't fork it.

  • Like 1
Link to comment
Share on other sites

26 minutes ago, Cassie said:

Apologies for the lack of demo @nico fonseca's pen is private so I can't fork it.

Ups, sorry for that! Now is public 😅

 

And same for me, I saw it working well on mobile.

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...
On 6/11/2021 at 1:37 AM, akapowl said:

Since you are not actually scrolling horizontally but only just faking horizontal scroll-behaviour with a tween on vertical scroll, you can not use the horizontal property of ScrollTrigger and have to calculate the start and end yourself.

 

Here is the demo from the demos-section showcasing that

 

Is it possible to make it work even if you use multiple scrolling sliders on the same page?

Link to comment
Share on other sites

Hello there @Juku123

 

With the right logic in your JS it sure should be.

 

But the method shown above is actually a bit outdated since the release of GSAP 3.8.0, as that latest version comes with a neat containerAnimation property, that makes it waaaay easier to trigger individual animations in certain places in a fake-horizontal-scrolling scenario like that.

 

Check it out in the ScrollTrigger docs:

 

containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a 

See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen

 and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. 

 

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