[GSAP ScrollTrigger Issue with MatchMedia and Pinned Elements]

Hello everyone,

 

I'm currently encountering an issue in my project where I use GSAP to animate two sections. One of these sections is pinned, and the other one is observed by ScrollTrigger to initiate the animation.

 

In the structure of my JS code (shared on CodePen), you'll notice that the pinned element utilizes matchMedia. The second element, meanwhile, is a new instance of ScrollTrigger. The code has been simplified to its bare minimum for clarity's sake. I've retained only the structure of the code as in the project and removed the actual animations.

 

The problem I'm facing is that when we reduce the window size, the triggers of the second animation appear to be moving to different places as if they're calculating the pinned element's space incorrectly. The issue is even more pronounced in my private project, where duplicate triggers appear after resizing, also in various places.

 

Do you have any advice or potential solutions? I would appreciate any assistance.

I'm also attaching a video link in case you don't encounter this issue: https://www.loom.com/share/211ed4038853479b87c287ff6b6d06d3

 

Best regards.

See the Pen WNaPoKQ by Filip1139 (@Filip1139) on CodePen

[Scale SVG transform path on resize]

This is my mistake, I have described the problem incorrectly and chaotically. I want "X" to be 700px wide and tall (or 80% of the window width if is smaller than 700px), be centered on the screen and the image to be 100% of the window width. After the 'X' scroll, it should reveal the whole picture.

[Scale SVG transform path on resize]

Hello Greensock forum!

 

I have a case where I need a clip in path at the top of an image, and when I scroll down, that clip path "opens" the image. This kind of works, but if I resize the screen, the path goes back to the way it was before I resized it. This causes the clip path to have bad values. (see console.log )  This is the first problem. The second is: maybe you know a better method to calculate the shape size? It should be at most 700x700, but no more than 80% of the screen width.  Do you have any ideas?

 

See the Pen OJQaggN by nomad1139 (@nomad1139) on CodePen

[ScrollTrigger onToggle question.]

The FIRST one should never fade out. - you make it very well. Is possible to never fade out last one based on scroll direction?

[ScrollTrigger onToggle question.]

Thanks for the advice. Good opinion Your solution is almost perfect, I prefer your way. Thanks for taking a fresh look at this issue. I said almost perfect because if I have content below the pinned section, the pinned section overlaps the one below. The pinned section does not have the correct height.

 

See the Pen QWvbEXz by nomad1139 (@nomad1139) on CodePen

[ScrollTrigger onToggle question.]

Maybe it well be better view what i want to get:  https://alvarotrigo.com/fullPage/extensions/fading-effect.html#firstPage

I'd try make simillar effect but change content with normal scroll, not like here - by use once time mouse wheel. Sorry for my english.

[ScrollTrigger onToggle question.]

I want to pin section with '.pin-me'  like on codepen. When user scroll to 'data-step-trigger =2' i want to add hide animation or remove class from "data-step=1" and  and show animation / class to "data-step = 2".  If screen top touch 'data-step-trigger = 3 " then hide 'data-step = 2 ' and show " data-step = 3 "ect. Just replace content based on scroll.  

 

Do you know why 'onToggle' or 'toggleClass' not working? For example 'onEnter' or other methots works while i scroll.

[ScrollTrigger onToggle question.]

Hi. I want to pin a section and change child sections using fadeIn-fadeOut. I tried to use the onToggle method to get the data attribute or just index for the current section, but in this case "onToggle" doesn't work. Same with "toggleClass". Do you know why this is happening? I know I don't need data attributes, index is enough, but I've tried to do it in different ways.

See the Pen poPvdEx by nomad1139 (@nomad1139) on CodePen

[Scale Image to Full Screen on click. Horizontal scroll case]

I want to use similar image transition after img click like on this page: https://antoni.de/cases/ .  I have no idea how to scale. the picture after clicking on the entire width and height of the browser

 

See the Pen yLeoNPE?editors=1100 by nomad1139 (@nomad1139) on CodePen

[ScrollTrigger content changing]

@ZachSaucier  realy thanks for advice . 
Do you know how I can make the entry animation on timeline , but onLeave reset all delays? I updeted my codepen. 

 

 

Ok so I make it by toggle classes.  You can see it on codepen. I write something to still have visible by add class 'active'  last or first element depends of scroll direction. That how i make it. Any advices?

 

    ScrollTrigger.create({

        trigger: ".features",

        start: "top center",

        end: "bottom center",

        onToggle: self => {

            let { direction, isActive } = self;

            const featureBoxes = document.querySelectorAll('.feature__info');

 

            if (direction == -1 && !isActive) {

                featureBoxes[0].classList.add('active')

            } else if (direction == 1 && !isActive) {

                featureBoxes[featureBoxes.length - 1].classList.add('active')

            }

        }

    });

[ScrollTrigger content changing]

ok thank you, i fixed my mistake. I would like the boxes not to overlap when returning up

[ScrollTrigger content changing]

Hi everyone. I started working with ScrollTrigger and I have a problem with changing the content based on my location. I tried to do it like on codepen, but it does not work as it wants. In the example, the last photo of the kitty sometimes appears and sometimes not. I want to make a similar effect as on https://skookum.com/

See the Pen xxZrPEO?editors=0110 by nomad1139 (@nomad1139) on CodePen