LitRoman

Sometimes, when I change resolution I can see block at the left edge for short period of time as well, but then it returns to the center. On my website it happens without changing resolution, I don't know why. Seems like sometimes it don't want to move back to the center for some reason.

Also you can see the bug right after you change screen resolution to 0.5x for example.

Hello. I'm trying to use gsap and trigger plugin. Here is my code https://codepen.io/litroman89/pen/WNjVgza. It is not perfect but it doesn't matter, the bug is already there and you can see it, but I don't know how to start that bug for sure. I just scroll down to the bottom and up until the bug appears. In general animations works fine. Whole section should always stay in the center of the screen, but sometimes (I don't know why), after I scrolled all animations and trying to scroll back, the section (that I use for trigger animations) just moves from the center to the left edge of the screen... How can I fix that?

Hello. I have just started to learn gsap. Trying to animate some elements on scroll now. The code below is an example of my animation for text titles. There are 5 titles, and I want them to replace each other on scroll. The problem is that I have to scroll few times (more then just one scroll) to replace each title with another. Could you please help me to make it replace each other with each scroll? gsap.registerPlugin(ScrollTrigger); const titles = gsap.utils.toArray(".features__block__title"); const firstTitle = gsap.utils.toArray(".features__block__title-first"); const lastTitle = gsap.utils.toArray('.features__block__title-last'); ScrollTrigger.defaults({ toggleActions: "restart pause resume pause", }); const titlesLine = gsap.timeline({ scrollTrigger: { id: "CONTAINER", trigger: ".features", scrub: true, start: "center center", end: "+=200%", pin: true, } }); let stagger = 1 ; animationFromRight(titlesLine, titles, firstTitle, lastTitle); function animationFromRight(timeline, selector, firstSelector, lastSelector) { timeline .to(firstSelector, { opacity: 0, delay: 1, }); timeline .from(selector, { opacity: 0, stagger:stagger, x: 250, }) .to(selector, { opacity: 0, delay: 1.5, stagger:stagger, }, stagger) timeline .from(lastSelector, { opacity: 0, delay: 1, x: 250, }, 3.5) }