goodcontext

Thank you very much for your reply. Now it's working properly. Thank you.

codepen link Thank you very much for your quick reply. By the way, what I want is a method using timeline. I just changed the color of the letter to blue to simplify it, but I actually use .to a lot. How do I use timeline? I made a timeline. Now, everything turns blue when I start. How do I get started in a non-executed state? And I'm just asking because I'm curious. If it's not "display: inline-block", it doesn't apply even if I specify x or y values. why is this?

Hello, I would like to change the color of the text to blue for each "LOREM IPSUM" text. Now, contrary to my intention, the whole text changes color at once. I think I need to change it individually using something like forEach. I don't know how to implement it because it's related to timeline. I'd like you to give me an example code.

I see. I've already received enough help.I think I was too greedy. I'll ask this question elsewhere.Thank you.Have a nice day.

I think it'll be the last question on this topic.As mentioned above briefly, pressing F5 sometimes causes SECTION_02 to stop for a few seconds.There are times when it doesn't stop. I'm telling you the conditions for stopping.1-1. Scroll up 4 times in SECTION_01, scroll down once, go to SECTION_02, press F5 and stop for 1 to 2 seconds.1-2. Scroll up 3 times at SECTION_01 and scroll down once to SECTION_02 and press F5 to operate normally.2-1. Scroll up twice at SECTION_01, scroll down twice, scroll down to SECTION_03, scroll up once to SECTION_02, and press F5 and stop for 1 to 2 seconds.2-2. Scroll up from SECTION_01 and go down to SECTION_03 and come back up to SECTION_02 and press F5 to operate normally. 3-1. Go down to SECTION_04, scroll up again, come to SECTION_02, press F5 and stop for 1 to 2 seconds. 3-2. Don't scroll up from SECTION_01, go down to SECTION_03, come back up to SECTION_02, and press F5 to operate normally. After SECTION_02 stops for 1 to 2 seconds, SECTION_02 rises slightly. So at the bottom of SECTION_02 you can see SECTION_03 slightly about 100px. If it's this kind of condition, it's 100% happening, so could you tell me if there's a problem with the code below with these conditions?I think it's a very difficult request, but I'm asking because I think it might be an easy question for those who know it well. I think this will be my last question in this topic.Thank you. gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, Observer, TextPlugin); ScrollTrigger.config({ limitCalbacks: true }); const scrollTo_timeline = gsap.timeline({ defaults: { duration: 0.5 }, onComplete: () => animating = false }); const sections = gsap.utils.toArray("section"); const scrollTo_value_array = [0, (960 + 150), (960 * 2 + 150), (960 * 3 + 150)]; let value; let scrollTo_value_index = JSON.parse(sessionStorage.getItem('value_index')); animating = false; if (typeof(scrollTo_value_index) === undefined) { scrollTo_value_index = 0; sessionStorage.setItem('value_index', JSON.stringify(scrollTo_value_index)) } function goToSection(direction) { if(animating===false) { animating = true; if ((scrollTo_value_index >= (sections.length - 1)) && (direction === 1)) { scrollTo_value_index = (sections.length - 1); sessionStorage.setItem('value_index', JSON.stringify(scrollTo_value_index)) gsap.to(window, { onComplete: () => animating = false }); } else if ((scrollTo_value_index <= 0) && (direction === (-1))) { scrollTo_value_index = 0; sessionStorage.setItem('value_index', JSON.stringify(scrollTo_value_index)) gsap.to(window, { onComplete: () => animating = false }); } else { scrollTo_value_index += direction; sessionStorage.setItem('value_index', JSON.stringify(scrollTo_value_index)) value = scrollTo_value_array[scrollTo_value_index] scrollTo_timeline.to(window, { scrollTo: { y: value }, duration: 0.5 }); }; } }

Thank you for your answer.The wrong part you told me was fixed using sessionStorage.I haven't done any responsive web work yet, and sometimes when I press F5 in SECTION_02, it stops for 1 to 2 seconds, but I don't know why.Other than that, I think it works perfectly.Thank you very much for your reply.

I took the basic pen with Blake's code and combined it with my js file.I thought everything went well, but there was a problem with the edge browser.When you scroll, sometimes you jump two spaces or there's a rebound at the end of the animation.So I made it myself by referring to the Observer Plugin demo and Blake's code.As a result, the movement has improved relatively.The problem occurs when you press the F5 key in your browser.Press F5 on SECTION_03, SECTION_04 and scroll down to create a strange situation going to SECTION_02.I think if you press F5, it goes up to SECTION_01.Because even if you press F5 on SECTION_02 and scroll down, it becomes SECTION_02.I think it'll be almost perfect if I solve this problem, is there a good way?I'm making a portfolio for employment, and it's a very important issue for me because I'm expected to press F5.Please give me a good answer. Thank you. It's a minimal demo that I made. made for 1920x1080 resolution. https://codepen.io/goodcontext/pen/QWQBqeQ

I thought everything went well, so I posted a comment, but I found a new bug.Can't I delete the reply?I'm going to do it myself as much as I can.

As you said, adding the code works exactly well.There are several SOLUTIONS, but I will give the mark as solution to the last person.It works well because I added the code below.Thank you both. Have a nice day. ScrollTrigger.config({ limitCallbacks: true });

There was a problem, so I made a minimal demo.Pressing Refresh F5 in the browser moves up and down in SECTION_03.In SECTION_04, if you press it a few times, it will scroll to SECTION_03.There was no problem with SECTION_01 and SECTION_02.In the minimal demo, I added the h1 tag, and there is a slight movement in SECTION_01 and SECTION_02. Originally, there was no movement at all.I thought I should kill something or return false, so I tried return false to the function in the js file, but it didn't work.I can't use the F5 key in the code pen, so I'm uploading the source code.What should I do to solve it? Since there can't be no answers, I'll do an unmark as solution for a moment.Thank you. index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bug report</title> <link href="css/reset.css" type="text/css" rel="stylesheet"> <link href="css/style.css" type="text/css" rel="stylesheet"> <script src="js/gsap.min.js"></script> <script src="js/ScrollTrigger.min.js"></script> <script src="js/ScrollToPlugin.min.js"></script> <script src="js/script.js" defer></script> </head> <body> <section class="section_01"> <h1>SECTION_01</h1> </section> <section class="section_02"> <h1>SECTION_02</h1> </section> <section class="section_03"> <h1>SECTION_03</h1> </section> <section class="section_04"> <h1>SECTION_04</h1> </section> </body> </html> style.css @charset "utf-8"; h1 { position: relative; top: 45%; left: 40%; font-size: 70px; } .section_01 { width: 1920px; height: 960px; background-color: #000; color: #fff; } .section_02 { width: 1920px; height: 960px; } .section_03 { width: 1920px; height: 960px; background-color: #000; color: #fff; } .section_04 { width: 1920px; height: 960px; } script.js gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); ScrollTrigger.create({ trigger: ".section_02", start: "top 85%", end: "top 15%", onEnter: () => gsap.to(window, { scrollTo: ".section_02" }), onEnterBack: () => gsap.to(window, { scrollTo: ".section_01" }) }); ScrollTrigger.create({ trigger: ".section_03", start: "top 85%", end: "top 15%", onEnter: () => gsap.to(window, { scrollTo: ".section_03" }), onEnterBack: () => gsap.to(window, { scrollTo: ".section_02" }) }); ScrollTrigger.create({ trigger: ".section_04", start: "top 85%", end: "top: 15%", onEnter: () => gsap.to(window, { scrollTo: ".section_04" }), onEnterBack: () => gsap.to(window, { scrollTo: ".section_03" }) });

That's exactly the code I wanted.Thank you very much.I thought it was only possible with CSS, so I was trying with scroll-snap-type: y mandatory; code.The homepage is a portfolio for employment, and each page is equally 960px; high.I posted a question to make it easier to move the page.It's exactly the code I wanted. Thank you so much for making the code. I'll take into consideration your suggestions. Thank you for your kind words.

Do I have no choice but to use this code in CSS?I didn't really like it when I used it, so I checked if I could use it on GSAP, but if I search with GSAP on the code pen, most of it is in the code below CSS.And ScrollToPlugin only has examples of what you click on.Therefore, I wonder if I have no choice but to use the code below CSS, not ScrollTo.Do you have any other GSAP code? scroll-snap-type: y mandatory;

Hello.What I'm going to implement is if you scroll down a little bit, it's automatically scrolled to Section_02.On the other hand, I want to scroll to Section_01 automatically when I scroll up a little from Section_02.By the way, if you scroll down a little bit, you will move to Section_02 once, but it will not work properly after that. I think it's related to the ToggleAction of the ScrollTrigger, but it's no use fixing it because I don't know it well.How can I make it work?

Thank you very much for your answer.I did it with the GOOD code as you said, and it works properly.' <- That's why.Thank you very much.

There are two discoveries. 1. If you paste the ScrollSmoother code below on top of the js file, the code at the top will not work. However, if you put the code again at the bottom of the js file, some of the code will work, and some of the code will not work. 2. If you enter "scroller: '.class_name'" in the timeline, it will work. But the reason why this doesn't solve it is because I use two timelines, but the positions of the two timelines are far apart, so if the timelines above work, the timelines below seem to start at the same time. If you scroll down slowly, the timeline below is already run. But it works fine on the code pen. Why is it like this? gsap.registerPlugin('ScrollSmoother', 'ScrollTrigger', 'TextPlugin'); const smoother = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", smooth: 1, normalizeScroll: true, // prevents address bar from showing/hiding on most devices, solves various other browser inconsistencies ignoreMobileResize: true, // skips ScrollTrigger.refresh() on mobile resizes from address bar showing/hiding effects: true, preventDefault: true });