[Multiple .fromTo() on the same element]

13 minutes ago, OSUblake said:

However, you can export a function to return a timeline.

export function fade() {
  return gsap.timeline().fade(...)
}

 

Then in main.js...

scrollTimeline.add([fade(), ...])

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

[Multiple .fromTo() on the same element]

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.

[Multiple .fromTo() on the same element]

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

[Multiple .fromTo() on the same element]

//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

[Multiple .fromTo() on the same element]

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

[Multiple .fromTo() on the same element]

See the Pen XWeaeLq by donrus (@donrus) on CodePen

 - it works. But how can I encapsulate animations in the components source files? 

[Multiple .fromTo() on the same element]

@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.

[Multiple .fromTo() on the same element]

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 

See the Pen OJxjpGr by donrus (@donrus) on CodePen

[Could you give an idea how to implement scroll of two sections in turn? Thanks in advance.]

[ScrollTrigger missing triggers on fast scroll]

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

[ScrollTrigger missing triggers on fast scroll]

See the Pen xxrvrMg by donrus (@donrus) on CodePen

 I just changed a little demo above.

[ScrollTrigger missing triggers on fast scroll]

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