Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by goodcontext

  1. Hello. When scrolling horizontal, What should I do to set the ".background" image as a background? It's not in the demo, but...I applied a different effect to the background image first. Then, the ".images" horizontal scroll begins. But before we start horizontal scrolling. The background image moves up. How do I leave the background image in the background while I horizontally scroll through the images?
  2. Thank you for your answer.I was waiting for a few minutes to answer yesterday, and I just slept because it was dawn.I didn't think I had to manage the ScrollSmoother file.I'm sorry for my carelessness.And thank you for deleting the file.Originally, I used a minimal file, but I thought it would be better to see the number of file lines in the error message, so I replaced it with an ESM file, but I didn't know if I would create a new error message.The error has just been resolved. Error caused by incorrect class name specified by querySelector.I expected it to be a typo because I changed the class name a lot in the HTML file, but I couldn't find it yesterday because I was tired.Thank you very much for your answer. Have a nice day.
  3. I made a minimal demo.There are only html files and js files, but there is no content, html has only the head part, and js file has only the register plugin part.Nevertheless, when you press F12, the same error appears in your web browser.All of the js files are the latest versions that have been downloaded. Why is this happening? index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> <script src="js/jQuery.3.6.0.min.js"></script> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/gsap-core.js"></script> <script src="js/ScrollTrigger.js"></script> <script src="js/ScrollSmoother.js"></script> <script src="js/script.js" defer></script> </head> <body> </body> </html> script.js gsap.registerPlugin(ScrollTrigger, ScrollSmoother); Both Chrome and edge browsers have the same problem, and other PCs have the same problem.
  4. There is an error like a screenshot.I wondered why this error occurred, so I pressed Ctrl-Z in the visual studio code and returned it to its original state, where there was no problem. And yet the error is still there. I don't think I recovered 100% because I had to press Ctrl+Z a lot. I cannot recover to Ctrl-Z at this time. I rebooted because I thought it was a PC problem.I tested the AVAST vaccine because I thought it was a virus problem, but there was no virus.I get the same error message when I try to access the web from another PC.So I don't think it's a PC problem.I think I did something wrong, but I don't know what it is. I thought it was a typo, so I looked into HTML, css, and js files, but I couldn't find any problems. I'd appreciate your help. It's a portfolio file for employment, should I upload the original? (CSS file and JS file are about 300 lines each. It's too much for others to analyze.) Or should I ask Club GreenSock Contact Us?
  5. I solved it myself again. pinReparent: true, pinType: "fixed" It works when you fix it with ScrollTrigger.How do I delete Topic?
  6. Hello. When I used ScrollSmoother, the Circle Text Animation is "position: fixed;", but the location is not fixed. When you scroll, it moves together. What's the way to keep them in the same position all the time?
  7. I found the answer myself.That's because the background image has "data-speed: 0.1".#wrapper has a "position: fixed;" value, so it works well when I put a background image outside #wrapper. I don't know, but I think if you put the value "data-speed: 0.1", the "position: fixed;" attribute will also be automatically added.I don't know how to erase this topic, so I'll just leave it. https://codepen.io/goodcontext/pen/rNJjdZm
  8. Hello.Like "position: fixed;" the background image is at the top.#wrapper has "position: relative;", but it doesn't go down, it's at the top.You can see the overlapping images by setting the opacity value to 0.5. The position value is not fixed, why is this happening?
  9. I was able to solve the problem by watching the video of the pin part in the DOC you told me.Thank you for your answer. https://codepen.io/goodcontext/pen/VwQmzao
  10. It's for your convenience. For example, when you move a window, it sticks to the corner like a magnet. If you scroll down the image, the image will go up straight, and if you pause for about half a second when the image is in the correct position, it will be much easier for the user to fit the image in the correct position. I put a carousel in the middle, but if I scroll, it goes a little too far, so I can't see the top. So that's how I thought about it.
  11. It's the latter.When the user scrolls down, even if they keep scrolling, they want it to stop at a certain point, just a little bit for a second.Thank you.
  12. Hello.I'm going to put in a function that stops while scrolling.For a moment, I'm going to get the top of the image and the top of the screen exactly right.Should we use the pause() function of timeline?Or can it be solved with the function of scrolltrigger?
  13. I solved it myself. It works well when I change the svg's position: relative; to position: fixed;. Thank you.
  14. Thank you for your answer.But if you look at the cord pen, the mouse follower doesn't go down below the height of the woman's nose.The same problem occurs when I apply it to my site.What should I do to solve this, too?
  15. Hello.The mouse follower is clearly visible in the red area at the top, but it's covered when you scroll down toward the video.How can I make it visible? Should I ask sourceforge instead of here?
  16. Originally, the .ball class was a div tag.I changed it to svg circle.Then, you can only see it properly if you move the mouse pointer to the limited square area in the upper left corner.How can I solve this problem?
  17. I think I tried in an impossible way.Looking at other sites, the method is different from mine.Thank you for your answer. I was able to learn a lot.
  18. Thank you for your good answer.By the way, if you use pinRepresent: true, it works well with the code pen. However, the L-letter and red background disappears from the site I created, and it reappears after a long scroll.In short, in the past, the location changed arbitrarily, but now it disappears instead of changing its location.Should I use CSS to fix it instead of pinRepresent: true?
  19. If you scroll up the start-4th-2 above the scroller-start-4th-2, you can see that the L letters and red backgrounds move arbitrarily. I don't know what to do because it moves even though Position: absolute. .scroll_page, .scroll_page * { transform-style: preserve-3d; } Or .image_wrap { position: relative; top: 0; width: 100vw; z-index: 0; } If you remove these, they work normally. I think it's because of preserve-3d. "transform-style: preserve-3d;" is essential.
  20. Thank you for the detailed explanation.Thanks to you, I solved it.I didn't even know this and was just looking at the CSS. Have a nice day.
  21. I heard what you said and found the answer while making the code simpler.The problem was that the code imported from GSAP was pasted onto the code I made.It's working well because I pasted it under the code I made.Thank you so much. https://codepen.io/goodcontext/pen/YzEYeEB
  22. My original goal is to scroll down, and the LOREM IPSUM text appears in the middle, and three images go up above it.At first, the LOREM IPSUM text was fixed well at the top by pin: "ID NAME" in scrollTrigger.By the way, when I added a code with the smooth scroll function, there was a bug like this. The LOREM IPSUM text is not fixed and goes down the screen.The code with the smooth scroll function is the code located at https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy().This is Demo (Native ScrollTrigger). The code I entered starts with this code, and all of the above codes are Demo (Native ScrollTrigger) codes provided by GSAP. It comes out a little under two-thirds. // scroll Trigger // gsap.registerPlugin(ScrollTrigger); let text_animation_02 = gsap.timeline({ scrollTrigger: { trigger: "#L-path", start: "top 20%", endTrigger: "#image_last", end: "bottom 80%", markers: true, pin: "#text_animation_2", ease: "power2.easeOut", id: "1st" } }) To make the code as simple as possible, I erase all of the top and upload it.Originally, there are other texts above the LOREM IPSUM text, so the LOREM IPSUM text should not appear from the beginning.If I change it to "position: fixed", the LOREM IPSUM text appears from the beginning, so it doesn't work well. (All svg-related codes in HTML files are text animation-related codes, so you can ignore them.) Please help me.And I have another question. Is it recommended that I designate the trigger, start, and end of the scroll trigger?I wonder if it's a difficult way for others to understand if they collaborate with others.If there is a recommended way, please let me know with a simple example. thank you.
  23. https://codepen.io/goodcontext/pen/vYWLdvX Thank you both so much.I fixed the code and it works perfectly.Thank you. result_code.zip
  24. https://codepen.io/goodcontext/pen/MWOKENx scrollPage.from -> gsap.fromI changed it to, but it doesn't work well.Thank you for your answer. bug_report02.zip