Jump to content
Search Community

Main timeline works just for the first element

Fafaa test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hello there , it's my first project with GSAP.

I try to animate 4 div in the same place one after one, the first issue is just the last div is visible because of display . And after several tries with display :none or visibility :hidden ,i never solve the problem.

The second problem concerns mainTimeline, it only works with the first element.

 Any help would be much appreciated!

See the Pen zYKYzvR by fafa_a (@fafa_a) on CodePen

Link to comment
Share on other sites

  • Solution

 

Hey @Fafaa - welcome to the forums.

 

There is a whole lot going on in your demo.

 

Let me start with this:

 

Inside your createAnimation function, you shouldn't target the elements with document.querySelector() but with with socialId .querySelector() instead.

This way you make sure to only target the elements inside the respective container - otherwise you would be targeting the elements throughout the document. with no specification.

 

The way you first set up the 

 

const twitter = () => createAnimation("twitter");
...

 

and then add it to the timeline like that

 

mainTimeline.add(twitter())

 

seems to have resulted in multiple timelines (2 in each case) being created, so I condensed that procedure of yours to this instead

 

mainTimeline.add( createAnimation("twitter") ).add( createAnimation("discord") ).add( createAnimation("instagram") ).add( createAnimation("youtube") );

 

which as intended creates one timeline for each of those functions only.

 

Finally, I changed the repeat: -1 that you set on each individual timeline to repeat: 1, because otherwise at one point you'd be caught up in a loop between two of those items animating back and forth, and I don't think that is what you intended. Instead I set a repeat of -1 to the masterTimeline, so the whole thing loops. Also I changed the initial zero-duration empty-tween at the beginning of each individual timeline to a duration of 0.25 instead, to have a nice short gap in between each of the items (could probably also be set up in a different way, but I think it's fine to do it like that).

 

In the end all those tweaks resulted in this, which I hope is at least close to what you had in mind.

 

See the Pen e4ea44337b112d0f97c18a343735b682 by akapowl (@akapowl) on CodePen

 

 

If it doesn't exactly resemble your idea, I hope now you at least have a better starting point on how to proceed with this to get it to your liking.

 

Cheers.

Paul

 

  • Like 5
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...