mikel

... and for all fans of pizza charts https://codepen.io/mikeK/pen/ZEGyeEr?editors=1010

Hey @hybrid09, No wonder - just GreenSock! https://codepen.io/mikeK/pen/d3759e1d3acc06c49fc3106c493cc2f6?editors=0010 Happy discovering ... Mikel

Hey @chrisi51 Please take a look at tutorials on TextPath - e.g. this https://codepen.io/mikeK/pen/6fa7024ac0283e5e5715777155c9d554?editors=1010 Happy tweening ... Mikel

Hey @Mauro.ie31, Sure ... https://codepen.io/mikeK/pen/bd68861c688081b70ba915de2f9f931b?editors=1010 Happy transforming ... Mikel

Hey @Mauro.ie31, Combining all relevant elements in one SVG makes perfect sense. All relations are defined and are flexible / responsive overall (viewBox). What is the reason to use a separate element? Please show your case in a CodePen.

Hey @Mauro.ie31 This example uses a scroll trigger and a timeline to manage the sequences: with a scroll value of 3000 (end: '+ = 3000') and a total duration of the timeline of 3 sec, 1 sec corresponds to 1000 px. You can of course change the duration of the tween or the position of the second tween - and thus the relationship to each other. https://codepen.io/mikeK/pen/6cb1afa6beafbd765d9def51e90fd297?editors=1010 Happy scrolling ... Mikel

Hey @chrisi51, Just for fun and little tricky https://codepen.io/mikeK/pen/61a9b29fd5791397017821817a0d216b?editors=1010 Happy random ... Mikel

Hey @knalle That was an experiment, a fork of - I don't remember from / from whom. A simpler concept - just morph as you can. https://codepen.io/mikeK/pen/zYBbpNW?editors=1010 Happy morphing ... Mikel

... another option https://codepen.io/mikeK/pen/cbda71ee41350e824d7ae5b6ff9eac5e?editors=1010 Be creative ... Mikel

Hey @Tom Roberts, There are always several options. Here's a little trickery https://codepen.io/mikeK/pen/d7242de8bac8878956e048d72741b305?editors=0110 Happy tricking ... Mikel

Hey @Zahurul, I guess you want it that way https://codepen.io/mikeK/pen/oNLVWmB Happy tweening ... Mikel

Hey @chrisi51, Does this variant help you? https://codepen.io/mikeK/pen/YzWBojJ Happy tweening ... Mikel

Hey @chrisi51, Welcome to the GreenSock Forum. There are several options. If you want to follow the concept of @OSUblake, it could work like this: https://codepen.io/mikeK/pen/ExyrJgp?editors=1010 Happy following ... Mikel

Hey @pauljohnknight It is not possible to stagger a single element (.forEach). So please try var moving = document.querySelectorAll('.moving span'); gsap.to(moving, { duration: 1, y: 0, opacity: 1, stagger: .1, scrollTrigger: { trigger: moving, toggleActions: 'play pause none reset', start: '0 80%', } }) Happy staggering ... Mikel

Hey @Limor, Welcome to the GreenSock Forum. Do you already know these tips? Happy tweening ... Mikel

Hey @she codes, It is not clear to me what exactly you want to achieve, what your problem is. Please try to formulate your request again. Maybe this example will help you a little https://codepen.io/mikeK/pen/cd75b815a0298372fe786f66e6b1e7db?editors=0010 Happy scrolling ... Mikel

Hey GUYS, Just a funny alternative https://codepen.io/mikeK/pen/LYZXqqQ Happy shaking ... Mikel

Hey @HiLuLiT, Your flex structure is too complicated for me. Here is the simple solution https://codepen.io/mikeK/pen/jOrQvLK?editors=1100 Happy tweening ... Mikel

Hey @HiLuLiT, You are using the same id for the images - not good. Try image{ height: 100%; } Happy learning ... Mikel

Hey @HiLuLiT, Just a simple example https://codepen.io/mikeK/pen/dyXQWaj?editors=1000 Happy clipping ... Mikel

Hey @HiLuLiT The nightingale effect regarding the image animation could be managed by clipPath. Here an example with ScrollTrigger https://codepen.io/mikeK/pen/cf3df695077b033d9cab544546e2c3ca Happy clipping ... Mikel

Hola! @fluxus, 'There are actually a bunch of ways to do this ...' https://codepen.io/mikeK/pen/d0936c3a8de1f233e1cdbb60c6a36dc0?editors=1010 ... and just for fun - no flip https://codepen.io/mikeK/pen/OJXRyYN Happy flipping ... Mikel

Hey @JudeB, Welcome to the GreenSock Forum. If you mean scrambling text check out GSAP ScrambleTextPlugin Happy scrambling ... Mikel

Hey @cooletski, This could be an option https://codepen.io/mikeK/pen/8ad02c6940dbb0176aa12d68147c8775?editors=1010 Or here another concept https://codepen.io/mikeK/pen/a859c1f8b3aadb3701af0895aede7e32?editors=1010 Happy scrolling ... Mikel

... and another concept https://codepen.io/mikeK/pen/rNewPrL Happy pointing ... Mikel