[gsap sticky]

tell me how to correctly fix an element when scrolling, so that it is glued to the top of the browser window and goes to the end of the product block

See the Pen dywrMzp by 150 (@150) on CodePen

[animation text]

 

Hello, I want to make an animation in the form of a wheel, with z-indices changing, how can I make a smooth transition without a delay between cycles?

See the Pen YzdEaEo by 150 (@150) on CodePen

[Delay numbers]

tell me how to remove the delay when scrolling through the numbers

See the Pen abQxaWN by mvaneijgen (@mvaneijgen) on CodePen

[Scrolltrigger pin]

 

Hello, tell me how to make it so that after the last block is superimposed on the penultimate page, it would be scrolled normally

See the Pen BavzYgB by 150 (@150) on CodePen

[svg motionPath]

Please tell me what am I doing wrong, I want the svg path to appear from top to bottom

See the Pen gOQrQxZ by 150 (@150) on CodePen

[scrollTrigger function]

13 hours ago, Rodrigo said:

Hi,

 

There are a few issues in your example. You are not registering ScrollTrigger at the top of the JS section and you have this warnings from GSAP regarding elements that can't be found on the DOM:

GSAP target .about__title .word not found.
GSAP target  not found. // Here you're passing a selector that returns null
GSAP target .dvigatel__after not found.

The second error comes from this:

gsap.from(".about__title .word", 1, {...}

Also there is no need to pass the duration in the second parameter, just use duration: 1 in your config object:

Вот форк вашего кода, который регистрирует плагин ScrollTrigger:

 

 

 

Пожалуйста, сделайте все возможное, чтобы предоставить работающую демонстрацию, чтобы мы могли взглянуть на нее.

 

Наконец, у вас есть более 4000 строк CSS в вашей демонстрации, это слишком много, и у нас нет времени на поиск проблем в больших базах кода, пожалуйста, уменьшите его до минимума.

 

Надеюсь, это поможет.

Счастливого твининга!

See the Pen MWzQRXj by 150 (@150) on CodePen

 

I left only the necessary fragment, I can’t realize the moment when the odometer starts counting only when it appears in the field of view, now it starts counting when the page is loaded

[scrollTrigger function]

56 minutes ago, GSAP Helper said:

Довольно сложно устранить неполадки без минимальной демонстрации — проблема может быть вызвана CSS, разметкой, сторонней библиотекой, вашим браузером, внешним скриптом, совершенно не связанным с GSAP, и т. д. Не могли бы вы предоставить очень простой CodePen или Stackblitz, который демонстрирует проблему? 

 

Пожалуйста, не включайте весь ваш проект. Просто несколько цветных <div>элементов и лучше всего код GSAP (по возможности избегайте фреймворков). Посмотрите, сможете ли вы воссоздать проблему с минимальным количеством зависимостей. Если нет, постепенно добавляйте код по крупицам, пока он не сломается. Обычно люди решают свои проблемы во время этого процесса! Если нет, то, по крайней мере, у нас есть сокращенный тестовый пример, который значительно увеличивает ваши шансы на получение релевантного ответа.

 

Вот стартовый CodePen, который загружает все плагины. Просто нажмите «fork» в правом нижнем углу и сделайте свою минимальную демонстрацию : 

 

 

Если вы используете что-то вроде React / Next /Vue/ Nuxt  или какой-либо другой фреймворк, StackBlitz может показаться вам более простым в использовании. У нас есть серия коллекций с разными шаблонами, чтобы вы могли начать работу с этими разными фреймворками:  React / Next / Vue / Nuxt .

 

Как только мы увидим изолированную демонстрацию, мы сделаем все возможное, чтобы вмешаться и помочь с вашими вопросами, касающимися GSAP. 

See the Pen MWzQRXj by 150 (@150) on CodePen

[scrollTrigger function]

var animTl = gsap.timeline({
scrollTrigger:{
    trigger:'.first-screen',
    start:'15% top',
    end:'25% top',
    toggleActions:'play none none none',
    
},})

function tweenGS() {
  var maxTime = 2;
  animTl.add("p1")
        .to(n6,{y:"-=160", repeat:1, duration: maxTime/2},"p1")
        .to(n7,{y:"-=80", duration: maxTime},"p1")
        .to(n3,{y:"-=400", repeat:2, duration: maxTime/4},"p1")
        .to(n4,{y:"-=640", repeat:1, duration: maxTime/2},"p1")
        .to(n5,{y:"-=80", duration: maxTime},"p1")
        .to(n1,{y:"-=800", repeat:1, duration: maxTime/2},"p1")
        .to(n2,{y:"-=240",duration: maxTime},"p1")
      
  gsap.to(animTl, 2, {progress:1, ease: "power3.inOut"});
}

tweenGS();

please tell me what I'm doing wrong I need the function to start on a trigger

[how to decrease amplitude?]

Tell me how to decrease the amplitude, I need the offset during the stager to be 5px

See the Pen MWzwRmL by 150 (@150) on CodePen

[MotionPathPlugin svg line]

 

i found a solution

[MotionPathPlugin svg line]

tell me how to make the end of the arrow move along with the line

See the Pen gOQrQxZ by 150 (@150) on CodePen

[ScrollTrigger pin timeline empty place]

26 minutes ago, mvaneijgen said:

Привет@Yuliya92 добро пожаловать на форум!

 

К вашему сообщению не прикреплен вопрос, не могли бы вы объяснить свою проблему в нескольких предложениях? 

I just started to study animation and I can't understand why there is a lot of empty space at the end and how to slow down the animation

[ScrollTrigger pin timeline empty place]

See the Pen MWzwRmL by 150 (@150) on CodePen