Scrolltrigger pin scaling image to 100%

[dave@friks.nl]

I've been trying to zoom an image by scaling it to 100% on a pinned element, that works fine but my element beneath this div are triggered at the same time. If i place the ".sticky-content" element above the ".zoomer" they both work fine.

 

Is there a solution for it?

 

Thanks already

 

HTML:

  <div class="zoomer">
           <div class="wrapper">            
                    <div class="images">     
                        <div class="clipper">
                            <img data-speed="0.5" src="/dist/img/large.png">
                        </div>
                    </div>            
                <div class="text" data-speed="0.1">                  
                    <div class="clipper">                    
                        <h2>Lorem ipsum</h2> 
                    </div>    
                </div>
            </div>            
        </div>

<div class="sticky-content">
            <div class="wrapper">
                <div class="text">
                    <div class="clipper">
                        <h3>Lorem ipsum</h3>
                        <p>Lorem ipsum</p>
                    </div>           
                </div>
                <div class="images">     
                    <ul>
                        <li><img data-speed="0" src="/dist/img/1.png"></li>
                        <li><img data-speed="0.2" src="/dist/img/1.png"></li>
                     </ul>
                </div> 
            </div>          
        </div>

Javascript:

  var images = gsap.utils.toArray('.zoomer .wrapper .images')
        images.forEach((image, i) => {   
            gsap.fromTo(image, {scale:0}, {scale:1, ease: "none", force3D:true,
                scrollTrigger:({
                pin:true,
                trigger: jQuery(image).parent().parent(),  
                start: "top top",    
                end: "bottom top",       
                pinType: isTouch ? 'fixed' : 'transform',
                scrub: true,
                markers:true,
                }),
            });           
        })            

var texts = gsap.utils.toArray('.sticky-content .text')
        texts.forEach((text, i) => {           
            ScrollTrigger.create({
                pin: text,
                start: "top 40%",
                endTrigger:  jQuery(text).parent().parent(),
                end: "bottom 40%+="+gsap.getProperty(text, "height"),
                pinType: isTouch ? 'fixed' : 'transform',
                markers:true,
               })     
        });                
                 
       

 

[akapowl]

Hello Dave,

 

Especially when it comes to ScrollTrigger related questions, it is really hard to give any advice, let alone truly understand your issue, without having a minimal demo to see your situation in action and be able to tinker with. So it would be great if you could create one

 

 

 

[Edit: 

One thing I do notice, is that you do not set a trigger element in the forEach loop for your texts, so it will default back to the body as the trigger element for all those ScrollTriggers - maybe that is something you'll want to change.]

 

Correction:

Apperantly as you set the text to be pinned in the aforementioned case, ScrollTrigger will set that element as the trigger - that I didn't know. So just ignore the edit above.

[dave@friks.nl]

Yes, i made a minimal demo:

 

See the Pen RwjgOGd by Knerp (@Knerp) on CodePen

 

Hope this helps to find a solution?

[akapowl]

 

Yes, thank you, that does help clear things up.

 

It is always best to create your ScrollTriggers in order of appearance of elements on the page.

 

In your case, since you are creating your ScrollTriggers in forEach loops, that is where the cause for your issue comes from.

Doing it like that, you are creating the ScrollTrigger for the second text-section ahead of the ScrollTrigger for the image-section, so that subsequent text-ScrollTrigger can not know about the pinning of the image-section that comes before it.

 

I just added a ScrollTrigger.sort() at the very end to sort all STs created by the order of appearance on the page in hindsight.

That is just one (and maybe the easiest) option for you in a case like that - you'll find some more in the docs. I hope it will help.

 

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

 

See the Pen GROvNjq by akapowl (@akapowl) on CodePen

 

 

 

Sidenote: there is no such thing as startTrigger - it is only trigger

 

Happy scrolling!

 

[dave@friks.nl]

Thank you very much! it's working as expected but if i clone the whole part again with the same classes it's still not working on the latest sticky part:

See the Pen RwjgOGd by Knerp (@Knerp) on CodePen

Maybe i need some tweaks again?

[akapowl]

Adding a refreshPriority of -1 e.g. (as outlined on the docs-page I linked above) to the text-scrolltriggers, to make sure they get their positions calculated after the other pinning ScrollTriggers, would resolve that.

 

When you set a refreshPriority somewhere, you also won't need to call the ScrollTrigger.refresh() anymore, because ScrollTrigger will do that automatically for you then.

 

See the Pen qBVXrNo by akapowl (@akapowl) on CodePen

 

 

 

Also be very careful about the syntax / spelling of things - right now it does not seem to affect much but that might change in different scenarios.

 

In your latest pen you wrote triger instead of trigger 

 

And you might also want to take a look at my comment in the pen of my first reply, better not to use an array/list of multiple elements for the trigger.

 

Does that work better for you now?

 

[dave@friks.nl]

Yes it works! Thanks for your support.

 

We are working with flexible content so we reuse classes and don’t know the order of appearance. 
 

Is there a clean setup to manage this? You suggest an array(but how to build this with flexible dynamic content?)

 

thanks again😊

[OSUblake]

I don't know what you mean by flexible content, but when you query the DOM, it's going to return elements in the order they appear, so you can use that fact to sort out how to create stuff.