Jump to content
Search Community

How can I achieve panels left touch event?

bntratox test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Anchor navigation to ScrollTriggered section (codepen.io)

 

Im using this codepen example on scrolltrigger demos.

For example, I want to give class to "Panel 2" text when it comes to the screen. Its not only for panel2, I also want to give every panels header a spesific class when it enters the screen.

The issue is I've tried  the code below to detect the panels visibility, but it doens't work. Its probably because of its using its parent divs position.

    gsap.from("#panel-3", {
        scrollTrigger: {
            trigger: "#panel-3",
            start: "left left",
            markers: true,
            onEnter: () => {
                console.log("enter");
            },
        }
    });

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

Link to comment
Share on other sites

  • Solution

Hello, @bntratox,

 

containerAnimation was made to make what you are trying to do a breeze. Have a look at it in the ScrollTrigger docs.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

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. 

 

 

 

For changing classes on elements, you could either implement logic of your own in the ScrollTrigger's callbacks, like you do with your console.log, or you could see if ScrollTrigger's toggleClass could be helpful for your usecase, too.

 

toggleClass String | Object - Adds/removes a class to an element (or multiple elements) when the ScrollTrigger toggles active/inactive. It can be either of the following:
  • String - The name of the class to add to the trigger element, like toggleClass: "active"
  • Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements.
Note that toggleActions don't apply to toggleClass. To have toggle class names in a different way, use the callback functions (onEnter, onLeave, onLeaveBack, and onEnterBack).

 

  • Like 3
  • Thanks 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...