Jump to content
Search Community

horizontal scrolling with other scrollTrigger animation with pin

Anurudh test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

First of all thanks a lot for creating GSAP, it is amazing!
I am new to gsap, I am working on a project where i intend to create 6 slides, which are both vertically and horizontally (fake-horizontally) scrollable.
but withing one of those slides (2nd slide) I want to implement the below pen!

I tried several approaches, but it does not seem to be working, I've been at it from 4 days straight, please help out!

Approaches i tried:
1. simply added the code with some minor changes in "start and end positions" [ it did work, but there were 2 different scrollers, and not connected to each other]
2. tried horizontal: true [since it's "fake horizontal" it didn't work either]
3. containerAnimation -> well this almost worked, but "pin : true" cannot be used with containerAnimation. And i want the scroller to stay in view until the animation on 2nd slide is completely finished.

any suggestions would be very helpful,
thank you very much!

See the Pen 6a2480c123d88dc391faba0ea5cc590f by akapowl (@akapowl) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Anurudhand welcome to the GreenSock forums!

 

I'm not in front of my computer now so there is not a lot I can do in terms of providing a working demo that fits your specific needs. 

 

Earlier this week though we had a similar thread in the forums so perhaps you can find it somewhat helpful. The main concept is to add to the timeline that handles the horizontal slides animation, another GSAP instance so the elements will seem line they are pinned.

 

Have a look and let us know if you have more questions:

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

I read your post a few times and it's not clear to me what exactly you're trying to do. I see the CodePen which seems to be working fine. It's using a 3rd party smooth scrolling library which we can't really support here. 

 

Here are some tips that will increase your chance of getting a solid answer:

 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

  • Like 1
Link to comment
Share on other sites

18 hours ago, Rodrigo said:

Hi @Anurudhand welcome to the GreenSock forums!

 

I'm not in front of my computer now so there is not a lot I can do in terms of providing a working demo that fits your specific needs. 

 

Earlier this week though we had a similar thread in the forums so perhaps you can find it somewhat helpful. The main concept is to add to the timeline that handles the horizontal slides animation, another GSAP instance so the elements will seem line they are pinned.

 

Have a look and let us know if you have more questions:

 

Happy Tweening!

Thank you very much for the quick response,
This was very helpful, i was starting to think to that what i want to accomplish might not be possible and was starting to lose hope, well thanks a bunch for the response.

However i tried several things,
like creating a master timeline and adding other timelines to it, naming timelines and adding these timelines together to create one timeline, but i just cant seem to be able to accomplish it,

the animation has several timelines, if you look at the code, and some of those occur at the same time, combining everything in one timeline is proving to be very difficult for me, i have been trying. Please if you could guide me in the right direction, like if someone has already created something coplex animation like what i am trying to do then that would be a life saver.

thanks a lot.

Link to comment
Share on other sites

17 hours ago, GSAP Helper said:

I read your post a few times and it's not clear to me what exactly you're trying to do. I see the CodePen which seems to be working fine. It's using a 3rd party smooth scrolling library which we can't really support here. 

 

Here are some tips that will increase your chance of getting a solid answer:

 

  • A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
  • A clear description of the issue -  "the purple div only spins 90deg"
  • A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
  • A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

Hello, thank you very much for your response,
The third-party library is for some reason important only if you write code in codePen,
in local system it is not required at all.
and also, it doesn't serve much of a purpose other than smoothening the scrolling behavior.

Expected result.

Quote

The above pen animation, it is in vertical scroll right now, I want to convert it into horizontal (fake) scroll.

it would be like scrollTrigger within scrollTrigger.
and as i mentioned, i tried several approached mentioned in the post,
please let me know if it's still not clear and i am sorry for not explaining properly before.
please guide me in the right direction,
thanks alot.

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here is my list of requirements...please show me how to build it" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly.  We do have companies hire us to collaborate on complex ScrollTrigger/GSAP challenges. 

 

In general, though, I'd recommend focusing on your animations first and completely ignore ScrollTrigger. So if you want things to animate horizontally, build that first so it just runs on its own. Then, once you're happy with that, hook it up to the scroll. 

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

On 10/24/2022 at 1:56 AM, Rodrigo said:

Hi @Anurudhand welcome to the GreenSock forums!

 

I'm not in front of my computer now so there is not a lot I can do in terms of providing a working demo that fits your specific needs. 

 

Earlier this week though we had a similar thread in the forums so perhaps you can find it somewhat helpful. The main concept is to add to the timeline that handles the horizontal slides animation, another GSAP instance so the elements will seem line they are pinned.

 

Have a look and let us know if you have more questions:

 

Happy Tweening!

thanks this worked,
i did some more work on it and was able to create a master timeline to hold all animations in sequence, thanks for sharing the approach

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