Jump to content
Search Community

Multiple .fromTo() on the same element

donrusvlad test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

Hi donrusvlad,

 

An animation instance (Tween or Timeline), can only be in 1 place in a timeline, but you have added animation instances in multiple places, so the scrollTimeline is going to play in the last place you added it. 

 

So maybe add an unfade effect and do something like this...

const scrollTimeline = gsap.timeline()
  ...
  .unfade(".second, .third, .forth, .fifth")
  .fade(".first, .third, .forth, .fifth")
  ...

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

13 minutes ago, donrusvlad said:

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

 

I'm not sure I understand what you mean. Can you explain in more detail what you are trying to do? And by components, do you mean using a framework like React, Vue, etc?

Link to comment
Share on other sites

The effects will be global, so you just need to make sure the effects.js file is read first.

 

So if you were using script tags, you would have it like this.

<script src="effects.js"></script>
<script src="main.js"></script>

 

Or with modules, the main.js could be like this.

import "./effects.js";

const scrollTimeline = gsap.timeline()
  ...

 

Link to comment
Share on other sites

The concept will still be the same. You need to make the sure the effects.js file is read before all your other files.

 

What I recommend doing is register all your effects and plugins in a single file, and then export GSAP and any other plugins you might need a reference to from that file.

 

https://codesandbox.io/s/nervous-microservice-zi5u6?file=/src/main.js

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution
29 minutes ago, donrusvlad said:

I wouldn't like to import effects to the main.js

 

You can try it however you want. What I showed is my official recommendation and I stand by it. It ensures you don't accidently register the same effect more than once, and your effects and any plugins are registered before use.

 

29 minutes ago, donrusvlad said:

I understand the point about timeline creation, but how can I use the same timeline with scrollTrigger multiple times

 

You can't. That would be the same issue I first posted about.

 

2 hours ago, OSUblake said:

An animation instance (Tween or Timeline), can only be in 1 place in a timeline, but you have added animation instances in multiple places, so the scrollTimeline is going to play in the last place you added it. 

 

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

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

 

Then in main.js...

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

 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...