Leaderboard

Yup, I tend to overcomplicate things 😅 @mikel's suggestion is definitely way easier than mine. https://codepen.io/akapowl/pen/vYKqwxM

Hey, Or you can define a suitable trigger for the end activity endTrigger: '.right-wrap', end: "bottom 100%", cheers ... Mikel

Hey @Olga__Kondr The way you have it set up with your end being +=100% means, it will be pinned for 100% of the height of your .left-wrap__description, which in this case would be around the 100vh you have set as height for that element. To get it working as you'd like, you would have to get the height of your right-wrap for the end and substract the height of your left-wrap (plus any margins applied to the right-wrap). See this example: https://codepen.io/akapowl/pen/KKMjYYV I changed the CSS for your .left-wrap__descr

Hey @SimplSam, Maybe I am not interpreting your setup and your ideas correctly. But why don't you use 'normal transforms'? https://codepen.io/mikeK/pen/5db6e0c6571ee7f554c6dd8876c77d59?editors=1010 Happy tweening ... Mikel

Hey @Farouq - welcome to the forums. You could either set it up via applying scroller: '.world' to each of your ScrollTriggers, or to all of them beforehand via .defaults like so ScrollTrigger.defaults({ scroller: '.world', }); https://codepen.io/akapowl/pen/oNLrVQz This is from the ScrollTrigger-Docs: scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scr

Hey, i just built a new burger menu and would like to get some feedback, what do you think about. Sure, there a dozens of em out there but i wanted to build one on my own - also to get more familar with gsap Maybe you see some really bad DON'Ts so please tell me then actually i would have to update the vh and vw in the timeline on window resize Thank you

Heye @smenegassi Now I can understand your intention. But I'm not an expert like @OSUblake to give you a hint how the birds can be combined with these sinus trajectories. Keyword birds: here are some gulls based on a concept by Blake also. https://codepen.io/mikeK/pen/MNbLOd Happy flying ... Mikel

Hey @smenegassi, Why don't you use a specific path that represents a sine curve. Of course you can calculate such a curve, but ... https://codepen.io/mikeK/pen/f02ae50bcec8b5da3588d59032887d1f?editors=1010 Happy curving ... Mikel

Hi @momciloo, I think, perhaps, you would be better off with a timeline in this case rather than competing tweens. https://codepen.io/sgorneau/pen/abZgrRR?editors=1010

The error is telling you what's wrong You're attempting to append the string '.titles' to a DOM element which causes it to use the .toString() method. That's not a valid selector so the error is thrown. What you probably want to do instead is thumbs[i+1].querySelectorAll('.titles') or something like that as the article that I linked you to covers. I encourage you to spend more time going over the demos in the article and playing around with them so that you make sure that you're understanding how they work. Additionally your target of ['.thumb.five .titles', '.thumb.five .credits

... just another concept to pin and change elements https://codepen.io/mikeK/pen/3991238d734744756c3c38947a5428f1?editors=1010 Happy scrolling Mikel

Hey @pOri_A, You could try an onUpdate like this https://codepen.io/mikeK/pen/0657089a2341ebf60f702661cbf082d3?editors=0010 Happy speeding ... Mikel

Hi, I am on my mobile so can't really write much code but I belive you just need an array of refs for this to work. Currently you are only animating the last item because that what the anim.current is. Checkout this example on how to create an array or refs in React and use them with ScrollTrigger. https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/#5-how-to-create-an-array-of-refs Let me know if that helped.

A little Draggable and ThrowProps can handle most of that slider effect for you. It's similar to one I built a few months ago. Maybe it'll help you get started. Happy tweening.