Jump to content
Search Community

Looped Carousel with Container Animation

Brian_Open test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi,

 

I'm looking for some assistance with GSAP. I'm trying to connect two GSAP examples which incorporate infinite scrolling and containerAnimation.

 

The problem I am having is the containerAnimations are not triggering when the slides comes into view.

The 2 examples I have been working of are 

See the Pen BaPqzvX by andrei-savu (@andrei-savu) on CodePen

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

 

The goal is to add some parallax elements to each slide. We have been working on a mini project for a story feature where a rabbit runs to explore Irish Folklore stories. It's using GSAP plugins ScrollTrigger and Observer and it's nearly doing everything we need other than the parallax elements.

 

https://nationalleprechaunmuseum.flywheelstaging.com/test/

 

It would be very helpful if someone could give me a few tips or help here with my problem.

 

Thanks

 

 

See the Pen qBJzNER by Brian_Open (@Brian_Open) on CodePen

Link to comment
Share on other sites

Hi @Brian_Open and welcome to the GreenSock forums!

 

I don't think container animation is what you're looking for actually. If you check the example you posted the faster horizontal animation is not linked to the scroll bar but to the wheel event.

 

I think a far better approach is to have a single timeline that has both horizontal animations, each with a different duration and also different number of repeats so the total time of each loop is the same. So the faster animation is 3 seconds and repeats 9 times (30 seconds, remember that the first run counts as a repeat ;))  and the slower is 10 seconds and repeats 2 times (30 seconds) . Here is a super simple example of this approach:

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

 

Is worth noticing that this approach should allow you to use the container animation if you want/need to use that feature.

 

Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

Hi thanks for this it was helpful.

 

I have a follow up question relating to my original codepen.

 

If I wanted to disable trackpad movement from left to right or right to left. How would i go about doing that?

Been working on a project and it's nearly there but on desktop we want to disable the user from scrolling from to right. I know this is a high fidelity demo but it's based on the original codepen.

 

https://nationalleprechaunmuseum.flywheelsites.com/story/


 

Link to comment
Share on other sites

  • Solution

Hi,

 

The only thing I can tell you is that the observer instance has an event object with a lot of information there and checking with my laptop (that is a bit old and uses Ubuntu 20) that the trackpad reports a wheel event:

Observer.create({
  onChange: (self) => {
    console.log(self.event) // -> WheelEvent Object
  },
});

And that particular wheel event has a deltaX different than zero, so you could check for that in order to prevent it. If the event is vertical the deltaX will be zero and the deltaY value will be different than zero.

 

The issue here is that I don't know if every trackpad in every laptop out there will report the trackpad as a wheel event, you'll have check that.

 

Finally if you are already using ScrollTrigger, there is no need to load the Observer Plugin, since it's baked into ScrollTrigger:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.observe()

 

Hopefully this helps.

Happy Tweening!

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