Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by kmytor

  1. thanks if it's on that side, I will see the videos
  2. Perfect, perfect if it works for me. I have an other question How can I increase the size of the scroll or how can I duplicate the scroll? try to do this but it doesn't work, multiply the body trigger: "body" * 2, my my idea is that the scroll goes slower since it goes very fast. is there a way to do this? ScrollTrigger.create({ trigger: "body" * 2, animation: photoOnly, start: '34% 35%', end: '45.8% 38%', scrub: true, markers: true, })
  3. Thanks I will try it, if I cannot upload the example, ]Thanks again
  4. Hello, I would like to know how can I calculate half of an object and center it with respect to the window? I tried to make this code but I think I am a little lost .to('.content', { width: '100vw', x: "-100%" / 2, duration: 2, }, "<")
  5. Hello, again me, A new question has arisen, I want to put animations on it but the way I approach it because it is not working, can you guide me? I don't know if I should do a foreach or something else 😅 https://codepen.io/kmytor/pen/morMqa?editors=0011
  6. I have a question where it comes from or just a name was put here: ScrollTrigger.addEventListener ("refreshInit", () => { ////// refreshInit is the name or does it mean something else?
  7. oh! excuse me forget to see console. but if that's what I needed, but wooow you changed everything hehehehe I think I should do more things, I'm a newbie, I hope to learn more
  8. Hi, again me and my experiences, hehehe How can I wonder what I'm failing I want to get the size of the hancho for the horizontal scroll to take I'm trying countSlideList take it as your high const slideList = document.querySelectorAll('ol.Slide li'); let countSlideList = slideList.clientWidth; gsap.to(".Slide", { x: () => -countSlideList, //add slideList ease: "none", scrollTrigger: { start: 0, end: countSlideList, //add slideList scrub: true, markers:true } }); https://codepen.io/kmytor/pen/gOPmOGN
  9. Perfect, Thank you very much, I think it was a cache problem, it works for me thanks for your help, I am going to investigate more about how to put animations since I have the scroll ready and working. Total thanks
  10. I think I am missing some of these libraries, should I put them all? shouldn't it only work with the core?
  11. well, if you can not this example as the attached image how can I make it work as in the example of the url that I sent in the first post? http://torola.fwp.fastwp.net/fwp_project/where-worlds-collide-4/ because the scrooll of my example does not work either
  12. Sorry, the first thing is that the scroll of the image gallery works for me, currently it does not work but I cannot understand why The second is that I would like to move the scroll to complete 100% of the window as in the image that I attach.
  13. HI, I tried to scroll the scroll guide, but I can't, I understand that my structure is different but it should work, there is some way that the images are placed on top of the written content or that the written content can also be run with the scroll and that the let gallery occupies 100%, currently it is 50%, neither, markers: true, is visible . which is recommended for this process, Thank you, I hope you understand me https://codepen.io/kmytor/pen/gOPmOGN?editors=0011
  14. Hello, I am learning something about the new scroll, which I think is great the fact that it has been implemented. but I would like to know if I can get this result as in the attached link the image adjusts according to the window with respect to the scroll. if possible? http://torola.fwp.fastwp.net/fwp_project/where-worlds-collide-4/ Is there an example of doing it?
  15. Excellent thank you very much for the recommendations of the use I will study more, I really like how gsap is used. you are so friendly. Thank you
  16. Sorry, here is my example. I wish I could close and open the menu on the button and the button would rotate 45 degrees https://codepen.io/kmytor/pen/ExVXOwM?editors=0010
  17. Hi, I have this code with a pseudo-class::before and I also can't make this go the other way function animaOpen(){ gsap.timeline() .to(".nav-megamenu", {duration: 0.5, right:0,}) .from("ul#menu-mega-menu li", {right:-100, stagger: 0.1, duration:0.2, ease:"back"}, "-=1"); } btonMobile.onclick = function () { //console.log(rotate); if (".hambur-movil" !== "right: -190px") { rotate(); }else if(".hambur-movil" === "right: 0px"){ rotate.reverse(); } } &:before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url(./icon.svg) no-repeat center center; background-size: 70%; content: ""; z-index: 0; transform: scale(0.8, 0.8) rotate(45deg); } i want to know how to add this class with gsap, is there any way? otherwise I would have to change the structure of many parts of my website Help!
  18. all i find with ajax is with Jquery i would like to do it without jquery do you have any guide? to implement it with gsap
  19. Hello, I would like to make a page change, a transition from one section to another: Example: xxxx.com/about at xxx.com/contac is there any way to GSAP it? Gracias
  20. Great, you summarized all my mess in a few lines Thank you If I would like to know why you used constant
  21. I would like that by clicking alternate or quick clicks the animation of this event on the timeline will not be damaged, What I mean is if I quickly click on the buttons to change the image galleries do not get damaged Is there any way to tell it when show animation ends show hide animation? I am not very expert and I am in daily learning Thank you!
  22. kmytor


    Thank you It works but you have not expected something different The solution is like a demonstration. It would be but with. I have the problem I can only change one element, as I do to be more elements, I have to make a variable (var = name) for each element. example var newColor2 = window.innerWidth <737? "0": "0.5"; tl.to (".boxTarget", 1, {opacity: newColor2}); etc, etc...
  23. kmytor


    And in this my other example the achieved an important breakthrough but I can not get the animation on mobile I hope you manage to understand what I need to do
  24. kmytor


    Hello I understand you I do not explain myself very well, forgive me ... I made another example with the example that you made me but I am not very expert in programming, I defend myself with the basics and I wanted to do something more advanced but when I saw that it did not fit in the mobile I was forced to try a conditional so that it fits the animations look this is my example
  25. kmytor


    but this function does not change to red color it only changes when you put it like that > 737 and what I need is that it works in both yellow and red depending on the size of the screen and here is not happening