Freddan Posted October 15, 2022 Share Posted October 15, 2022 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 See the Pen rNvdgwK by Freddan3 (@Freddan3) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted October 16, 2022 Share Posted October 16, 2022 Welcome to the forums! I don't have time to read through all that code right now, but I'll quickly mention a few things: You'll SIGNIFICANTLY increase your chances of getting a solid answer here if you greatly simplify your demo. Maybe just focus on the one part that's not working for you. Eliminate all that extra wrapping JS and instead of having like 12+ tweens/ScrollTriggers, only have 2-4. It looks like you're pinning ".vision" and then you're also using that as a trigger for another ScrollTrigger. You may need to use pinnedContainer. Make sure you're creating your ScrollTriggers in the order they'd happen on the page (top to bottom). If not, you should define a refreshPriority so that ScrollTrigger knows the order in which to refresh things. This does absolutely nothing: gsap.from(".dot", { scrollTrigger: { trigger: ".blr_cont_child", start: "50% 54%", end: "+=250s" }, duration: 0.2, ease: "none" }); I'm not sure what the "s" was intended for in end: "+=250s", but it'll be interpreted as px. Just so you know. There's no such thing as mobileResizeRefresh. Maybe you meant to do ScrollTrigger.config({ ignoreMobileResize: true })? Link to comment Share on other sites More sharing options...
Freddan Posted November 5, 2022 Author Share Posted November 5, 2022 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. See the Pen JjZKVrX by Freddan3 (@Freddan3) on CodePen Thanks a lot for your support Link to comment Share on other sites More sharing options...
GreenSock Posted November 5, 2022 Share Posted November 5, 2022 Yeah, sorry, it's really hard to understand what you're trying to do, but I'll point out a few more things: scrollTrigger: { start: "50% 60%", end: "50% 45%", immediateRender: true }, In the above, code, you never defined a trigger. So when you say start: "50% 60%" that's like saying "when the center of the trigger (which isn't defined) reaches 60% down from the top of the viewport". It doesn't make a lot of sense. Same for end. And immediateRender: true is completely unnecessary. In fact, this code does absolutely nothing at all: gsap.from(".cont_sq_1", { scrollTrigger: { start: "50% 60%", end: "50% 45%", immediateRender: true }, duration: 1, ease: "none" }); This also doesn't make sense: pin: ".vision", pinnedContainer: ".vision", If you're pinning that element, it can't also be the pinnedContainer (it can't be inside of itself) You don't need to gsap.registerPlugin(ScrollTrigger) a bunch of times. Once at the top is fine. I strongly recommend just starting with something very basic. Get one part working, then move on to the next part and slowly build it up until it breaks or you get stuck. Then post the minimal demo here with your GSAP-specific question and we'll do our best to help. I just don't understand what you're trying to do and there's a lot of very odd code that's hard to sift through, so simplifying will really help. Link to comment Share on other sites More sharing options...
Freddan Posted November 6, 2022 Author Share Posted November 6, 2022 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? See the Pen xxzEWNN by Freddan3 (@Freddan3) on CodePen Thanks a lot for your patience and your support. Link to comment Share on other sites More sharing options...
Rodrigo Posted November 7, 2022 Share Posted November 7, 2022 Hi, There are a few issues in your example, I'll try to point out the most relevant of them. You don't need to set pinSpacing: true in ScrollTrigger, that's the default value that tells ScrollTrigger to add that extra space. Also you are setting your end point in a way that will cause problems, since the end point is before the start point, so basically that particular ScrollTrigger instance is completed before it starts: scrollTrigger: { trigger: '.cont_sq_1', start: '50% 55%', // Starts when the trigger center hit's 55% of the viewport height end: '50% 50%', // Starts when the trigger center hit's 50% of the viewport height // 55% of the viewport height is below 50% of the viewport height endTrigger: '.cont_sq_2', pin: ".vision", pinSpacing: true, scrub: true, markers: false,// on development always use markers true in order to see where your trigger points are }, Also you are creating a bunch of ScrollTrigger instances to control something that resides in the same parent element that is being pinned, just create one timeline, add all your animations there and tinker with their durations and the end point of the ScrollTrigger instance: See the Pen JjZbXbW by GreenSock (@GreenSock) on CodePen Finally I advice you to check the documentation on ScrollTrigger and see this video by @Cassie in order to grasp a better workflow setting up ScrollTrigger animations: Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Freddan Posted November 7, 2022 Author Share Posted November 7, 2022 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 }, See the Pen yLEVMNj by Freddan3 (@Freddan3) on CodePen 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now