Fafaa Posted November 26, 2020 Share Posted November 26, 2020 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 More sharing options...
Solution akapowl Posted November 26, 2020 Solution Share Posted November 26, 2020 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 5 Link to comment Share on other sites More sharing options...
Fafaa Posted November 26, 2020 Author Share Posted November 26, 2020 Thanks a lot. It's exactly that. Thanks for your explanation, i see where i was wrong. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now