Freddan

Hello @Rodrigo, I could never thank you enough for your detailed reply! All your suggestions are gold. You're right, I got confused trying to line up several timelines and make them work together. I thought I had to animate each individual element and then combine them together but, looking at the CodePen you sent me, I realised I was still a long way from such a clean and fluid solution. Now I understand better how to structure and work with ScrollTrigger for my next Tweens as well. I changed the order of the animations so that: the sliding .dot is visible before the first text block fades out (added delay to the third animation) the full screen magnification effect (orange background) start at the same time as the second text block fades in and it ends with the last text block I tried to include the Snap function in order to avoid the fading text block to stand overlapped but I got the whole timeline scrolling until the end with no stop. Do you think it is possible to set it on each text block? snap: { snapTo: [ 0.5 ], duration: 1, delay: 0 }, https://codepen.io/Freddan3/pen/yLEVMNj In the meantime, I will continue to watch other @Cassie's useful videos and read more documentation on ScrollTrigger. Thanks again for your time and for the support of you all.

Thanks @GreenSock for your support and for the pointers you suggested. What I am trying to achieve is a simple succession of text blocks with the full-screen magnification effect of the container div (orange background) occurring between the first and second text block. Following your suggestions I have simplified the code considerably and everything seems to work much more smoothly and without too many errors. Certainly before there were conflicts caused by repetitions and superfluous code strings. When I resize the screen the text blocks still overlap, but if you scroll up and down a bit, ScrollTrigger manages to recalculate everything and display it correctly. Is there any way that ScrollTrigger doesn't lose the scroll point of the page so that the text blocks don't overlap or is there still something wrong with my code? https://codepen.io/Freddan3/pen/xxzEWNN Thanks a lot for your patience and your support.

Thanks for your welcome @GSAP Helper and for all your support! I tried to reduce the code to focus on the main problem and to follow your suggestions but unfortunately I have not yet been successful. I am probably still missing something or I wrote something wrong on the JS. When I resize the screen, all the text overlap each other and I am struggling to understand where I'm wrong. I made another CodePen with the simplified version so, maybe it is easier to understand where I'm doing wrong. https://codepen.io/Freddan3/pen/JjZKVrX Thanks a lot for your support

Hello everyone, I'm trying to build a scrolling effect by combining many timelines and I noticed an incorrect behaviour on resizing that I could not understand.. In the attached Codepen you can see that if you scroll down the page to the middle of the animation, if you resize the browser, the elements overlap each other when you scroll up again. I developed 2 versions of the JS (First Script, Second Script) and both works the same even if their structure is different. I apologise if the code is messy but I am not very experienced with ScrollTrigger. I don't know which of the 2 scripts could work better and how o solve the elements overlapping on resize. Any help are more than appreciated

Hi Rodrigo, many thanks for your warm welcome and for the support you're giving to me. I tried to follow your suggestion but I am still having some problem. I would like to make possible that during each animation inside the container (blue square and purple square) the container will stop to scroll.. I guess I should pin it in two different times. Then it would be great to make the first blue square fading-out before the second one (purple) will appear. Thanks again for all your support

Hello everyones, I developed this minimal demo in which I'm trying to making appear the first blue square before the container get zoom-in and the second purple square inside the zoomed container without being affected by the parent zoom-in fx. I'm struggling to understand how to combine the elements.