dave@friks.nl

Yes! great, this is exactly what i'm looking for! I''m still wondering if i can make the animations more smooth at the end (the moment when the scroller-end is in position) ? Or maybe something of a camera path that smooths the animation more? Thanks for your help.

Hi People, i'm trying to control the camera in three.js with multiple scrolltriggers to look at all my hexagon corner points in 3d space. The concept is that the camera needs to move and zoom in whitin the "camera" divs part (the red outlines) then it need to stop one section (the "hexa-sections") and continue from that corner point to the next corner point. When i make one timeline it works well but now i need more scrolltriggers bu now the camera jumps back to start position of the camera en recenters the hexagon in screen. Is there a work-around to get a the scrolltriggers follow-up each other so the animation is continuing? Thanks

Thanks Cassie! I will wait for an update for the markers and fix the the first panel on vertical scroll and the rest on the horizontal (containerAnimation).

Dear GreenSock people, I'm trying to understand and create Scrolltrigger's containerAnimations combined with vertical and horizontal scrolling. The problem i'm facing is that the containerAnimation (for the horizontal panels) fires immediately on the first panel so the animation is already completed when it gets pinned. The markers are also gone for the horizontal part (they are floating somewhere on the bottom i think, so i can't see whats happening exactly) Can somebody make this clear to me? Thanks already!

Well it's difficult to describe but the images are not positioned correctly, i made another example without the animation: https://codepen.io/Knerp/pen/RwjBgVJ and this one is with the animation: https://codepen.io/Knerp/pen/WNXKOJe i think that the yPercent conflicts with the parallax or am i doing something else wrong?

I'm testing ScrollSmoother and it works fine for parallax scrolling but when i'm animating the "#header" element the position of the "img" whitin the parallax-slab container the y-position gets stuck. Is there a way to combine animation with the new ScrollSmoother? The best way to test is to view it in fullscreen, and remove the first animation to see the correct y-value

Yes thanks! it's working right now great: https://codepen.io/Knerp/pen/zYPyJLB Is it possible to give the text items a different move speed to get some parralax? Anf how can i get control over the slides to animate in the text over the images? Thanks again

Dear people, I can't figure out why my simple slider works only for the second time (the first time it slides half, to the center). And there is some extra space on the left (see the red borders at the first slide). Maybe there a some small things i'm doing wrong? Thanks already!

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?

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: https://codepen.io/Knerp/pen/RwjgOGd Maybe i need some tweaks again?

Yes, i made a minimal demo: https://codepen.io/Knerp/pen/RwjgOGd Hope this helps to find a solution?

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, }) });

It works like a charm! Great brand! great people!

Wow nice! Like this approach! But but is there a way to get the normal click behaviour on the images (if you wan't some links on the images)? because they are blocked by the absolute positioned div (".proxy")?