Jump to content

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


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Hey there! I have an issue on all browsers, but safari is the worst. When I use gsap.from(".element", { x: -20, // or y or yPercent, whatever scrollTrigger: { trigger: ".trigger", start: "top bottom", end: "top 50%", scrub: 0.1 }, }); Elements look like this. It will disappear after repeat animation and depends on scroll speed. How can I fix it? Examples: https://discoverdesignstudio.com/ (mobile version in the bottom) https://juliaciancifoundation.org/education/ (images moving from top to bottom, text)
  2. Hi everyone) I so much love gsap and scrolltrigger, but I always have some issues. If I create gsap.to() (doesn't matter what exactly) with jq in the start/end position, on window.resize (so on ScrollTrigger.refresh()) jq doesn't recalculating. Also if I will use var and give another value on window.resize it doesn't work too. gsap.to(".menu", { top: -2, scrollTrigger: { trigger: "html", start: "top top", end: "+=" + $(".header_wrap").height(), markers: false, scrub: true, }, ease: Linear.easeNone, }); How can I make it responsive on window resizing? I have to create the page which will work perfect anyway. P.S. I can't use some element like trigger, this is the most simple example for explaining. Other code and examples are more complicated and I have to use JQ there.
  3. Hello! It is hard to help you without your code. Can you add a codeopen link or just paste the code into your message?
  4. gsap.registerPlugin(ScrollTrigger); const rectPoint1 = document.querySelector('.point1').getBoundingClientRect(); const rectPoint2 = document.querySelector('.point2').getBoundingClientRect(); gsap.to('.div1', { y: rectPoint1.y, x: rectPoint1.x, scrollTrigger: { trigger: ".point1", start: "top 30%", end: "bottom 30%", toggleActions: "play none reverse none", markers: true, } }) gsap.fromTo('.div1', { y: rectPoint1.y, x: rectPoint1.x, }, { y: rectPoint2.y, x: rectPoint2.x, immediateRender: false, scrollTrigger: { trigger: ".point2",
  5. Remove "scrub" and create one more scroll trigger for second animation
  6. You made all right, but "start" has only "top center bottom". And your start and end were wrong It's
  7. You should use gsap.utils.toArrray gsap.utils.toArray(".section"). It will works automatically
  8. I fixed it by using default font with letters size like in the custom. The problem was in the font. Next line started because the custom font has big letter size and it loades latter then js.
  9. No, it is still broken(
  10. There is no bottom margin. It doesn't help. The problem is in the number of lines
  11. Hi! Here is a problem. This block moves down because text has 30% width and it has two lines. But script loads faster than text goes on the second line and the block moves down. I can't use <br/> because on mobile it will be other. How to fix it?
  12. I understand it. The problem happens while scrolltrigger moving to the center of section, not because scroll event doesn't stop
  13. Also on the whole page. here you can see the problem better
  14. Hello! Here is a video from the iphone 8+. I made little swipes and autoscroll as if to be afraid of scrolling)