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 });

It's weird.I copied all the HTML, CSS, and JS files into the code pen, uploaded all the image files, and made them exactly the same, but it works well.So I looked into the head part of the HTML, but I can't find the problem.ScrollSmoother is the latest version.

There is a code in HTML.I thought it would be a common error, so I asked you first.I'll make a minimal code.Thank you. <div id="smooth-wrapper"> <div id="smooth-content"> The codes are here. </div> </div>

Hello.I have pasted the ScrollSmoother code to the top of the js file.However, when I press F12 and enter developer mode, an error like a screenshot appears.And the timeline or ScrollTrigger codes, which were originally working normally, are not working properly.Why is it like this? I think I did something wrong, but I don't know what it is. The code below is pasted to the top of the js file. 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 });

Thank you for your answer.It was really simple. I didn't know, so I was doing everything.Thank you very much.

I made cursor with a red color. When text animation starts, the cursor is deleted. Even if I look at the DOC document, I don't think there's a way to prevent text deletion. Do I have to use something other than Text Plugin to make a typewriter effect that blinks? What should I use?

I was wondering if it would be okay to cover the bottom part of the image because the horizontal length gets longer in landscape mode.I'm glad to hear that there's no problem with the site.Thank you very much. It helped me a lot to create a portfolio site.Now I just need to make an intro site.Thank you very much for your concern.

It's not a minimal demo, but I'll show you the link to my portfolio site again.The CSS is 1300 lines, but you can search with vw or %. The number of vw is 11, and the number of % is 44. There's a lot of %. You don't have to look at all the codes, just look at the landscape mode on your mobile and let me know.Based on the landscape mode, I wonder if this is okay.Thank you very much for your concern.

I solved the first and second questions.It works well when I write smoothTouch: 0.1 in ScrollSmooth.create. The third question is that I deleted circle text animation from my portfolio anyway, so I'll have to look at it again when I have time later.I found another problem, but the vertical length is cut in landscape mode on the mobile phone. I think that's the problem because I gave the width value and the % value.Should I just give the px and rem value, and give the vw and % only when I really need them?I don't think it's related to GSAP, so it doesn't matter if you don't answer.Thank you. Have a nice day.

I have three questions.I'm done with the responsive web.In your PC's web browser, reducing the window size works fine.By the way, if you look at the Chrome browser on your phone, it doesn't work properly.The animation stops.It's the same Chrome browser, why is it like this?The second question is that desktop views in a mobile phone web browser do not match the layout. Even though the width is 100%, the image looks reduced to about 50%, and the hidden image on the right side is visible.Is there no solution to this?And the circle text animation that rotates in a circular shape didn't work properly, so I deleted it at all.It worked well when viewed in 1920 x 1080 resolution on a PC without media queries.However, if you create a responsive web, reduce the window size of the web browser, and return to it, the circle-shaped circle text animation disappears or cannot be fixed. In other words, when you scroll down, it goes up. This is the third question, should I make a minimal demo to know exactly? For your information, I will post a link to the portfolio site address again this time. (I will erase the site link when I get an answer.)CSS alone has 1300 lines, so I'm not asking you to look at the code. If you need to see the code, I will make a minimal demo if I can.The third question, circle text animation, deleted the code and is currently invisible. If you need to answer, I'll add the code I've backed up, or I'll create a minimal demo. Thank you for reading the long question.

Thank you for the good information.I wasn't confident, but I should give it a try. I think companies also see the technology of creating responsive webs as a necessity.Have a nice day.