Makssshow
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Makssshow
-
It works! Thanks a lot!
-
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)
-
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.
-
Hello! It is hard to help you without your code. Can you add a codeopen link or just paste the code into your message?
-
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",
-
Remove "scrub" and create one more scroll trigger for second animation
-
You made all right, but "start" has only "top center bottom". And your start and end were wrong It's
-
You should use gsap.utils.toArrray gsap.utils.toArray(".section"). It will works automatically
- 2 replies
-
- 1
-
-
- autoscroll
- gsap
- (and 1 more)
-
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.
-
No, it is still broken(
-
There is no bottom margin. It doesn't help. The problem is in the number of lines
-
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?
-
I understand it. The problem happens while scrolltrigger moving to the center of section, not because scroll event doesn't stop
-
Also on the whole page. here you can see the problem better
-
Hello! Here is a video from the iphone 8+. I made little swipes and autoscroll as if to be afraid of scrolling)
-
Hi there! On mobile safari autoscrolling to the sections is lagging. Can you help me to fix it?
-
Hi! These title has animation from bottom to top inside div with overflow-Y:hidden. But after first load of the page triggers of anim go down without reasons and after reload they fix. Why it happens?
