Jump to content
Search Community

ScrollTrigger and containerAnimation Problem

OrganicBlue test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi,

I'm trying to get each panel to have an opacity of .5 and a size of .8, both go to 1 when they get to the center of the screen, and no matter if they go left or right, they go back to the initial state.
Is it possible to do it with containerAnimation, or do I have to go in other way?

(I dont't understand why the start/end are on the middle of the viewport)

See the Pen VwxOyMr by Satelier-Diego (@Satelier-Diego) on CodePen

Link to comment
Share on other sites

  • Solution

Hi,

 

There are a few issues with your example.

 

First you are animating both xPercent and x on the same element and you are also animating the trigger element of the same ScrollTrigger instance:

let slideCardsTl = gsap.timeline().to(slideCardsWrapper, {
  x: () => slideCardsWrapper.scrollWidth * -1, // <- HERE
  xPercent: 100, // <- HERE
  ease: "none",
  scrollTrigger: {
    trigger: ".slide-cards__wrapper",
    pin: ".slide-cards",
    scrub: 1,
    snap: 1 / (slideCards.length - 1),
    start: "center center",
    end: "+=" + window.innerWidth * (slideCards.length - 1),
    invalidateOnRefresh: true
  }
});

In your code the variable slideCardsWrapper and the element with the class ".slide-cards__wrapper" are the same. Is not a good idea to animate the trigger element since it could lead to issues down the road. If possible wrap the animation target with an extra element that acts as the trigger.

 

As for the panels animation not triggering, I can't seem to find the reason for that and is a bit late, so instead I created a similar example with a different approach (also I'm using Tailwind, so if you want I can translate that to actual CSS classes that you can see). But basically, instead of using flex basis I used width and height in percentages:

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

 

This seems to work in the way you expect. I know is not the exact same setup you have, but hopefully is enough to get you started.

 

Let us know if you have any other question.

 

Happy Tweening!

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