scrollTrigger function

[Yuliya92]

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

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Yuliya92]

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

[Rodrigo]

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:

gsap.from(".about__title .word", {
  duration: 1,
  ...
});

Here is a fork of your codepen that registers the ScrollTrigger plugin:

See the Pen VwVNMPE by GreenSock (@GreenSock) on CodePen

 

Please do your best to provide a working demo so we can take a look at it.

 

Finally you have over 4000 lines of CSS in your demo, that's way too much and we don't have the time resources to find issues in large code bases, please reduce it to the bare minimum.

 

Hopefully this helps.

Happy Tweening!

[Yuliya92]

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

[mvaneijgen]

1. It is important in which order you load scripts. GSAP is the bases for everything, so it should load first
2. I've enabled markers:true in your script, so that we can see what is going on.
3. I've set  toggleActions: "restart none none none", now each time you scroll past the start marker it restarts
4. I've removed some JS, because I don't know what it is doing or because it was causing problems

Hope it helps and happy tweening! 

 

See the Pen abQxaWN?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

Just to clarify, the order does matter but you can still add the plugins first and the core after them if you register the plugins at the top of your JS code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
  // Before writing any code register your plugins
  gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, Draggable);
  
  // Now your GSAP code will work as expected
</script>

That will work as expected, but as Mitchel mentions is better to just load the core first as a good practice.

 

Hopefully this clear things up.

Happy Tweening!