donrusvlad

Thanks, that is the solution. I see that I should create several timelines, not use one timeline several times.

I wouldn't like to import effects to the main.js I would like to import them in first.js file. Then I make all animations in this file. After that I export all these animations to main.js file and add them to scrollTimeline I understand the point about timeline creation, but how can I use the same timeline with scrollTrigger multiple times. May be I should use some timeline controls methods or something.

I wouldn't like to import effects to the main.js I would like to import them in first.js file. Then I make all animations in this file. After that I export all these animations to main.js file and add them to scrollTimeline

//this code is in the file first.js const fadeFirst = gsap.timeline().fade(".first"); const unfadeFirst = gsap.timeline().fade(".first").reverse(0); then I need to import these timelines in main.js and add them to the scrollTimeline

I added comments to the .js file on codepen. Its just separate js files with classes, no framework used.

https://codepen.io/donrus/pen/XWeaeLq - it works. But how can I encapsulate animations in the components source files?

@OSUblake Thanks for quick reply. I see what you mean, but I created separate file for each component and implemented animation there. Then I imported those components in main.js and created ScrollTrigger animation. Everything works fine except those animations that added to scrollTimeline several times.

Hi. I have an issue with multiple .fromTo() tweens that concerns one element. Could you help to find out what is the reason of unevident behavior. I need to implement such functionality: 1. All section unfaded at start point 2. All faded except first section 3. All unfaded 4. All faded except second section 5. All unfaded ... 10. All unfaded Here is the demo https://codepen.io/donrus/pen/OJxjpGr

Two sections scroll ‐ Made with Clipchamp (2).mp4

Thanks. But that is not an evident behavior. I think it should be mentioned in the documentation.

https://codepen.io/donrus/pen/xxrvrMg I just changed a little demo above.

On fast scroll onEnter, onLeave fires as needed each time, but onToggle callback works unreliable and may not fire.