Duplicate element on animation

[Toliy36]

I don't know if this has been asked before but I'm doing a simple animation where an arrow scrolls to the bottom, disappears and comes out on top again, that works but then I wanted the arrow to appear on top before it disappears on the bottom completely. The first video is what I currently have and the second one is the effect I want to achieve, how could I make that?

 

 

 

 

 

 

gsap.to(".hide-loop", {
	keyframes: {
		"0%": {yPercent: -100},
		"25%": {yPercent: 0},
		"75%": {yPercent: 0},
		"100%": {yPercent: 100},
		"easeEach": "power2.inOut"
	},
	duration: 2.5,
	repeat: -1
});

 

[akapowl]

Hey there @Toliy36, welcome to the GSAP forum.

 

your title pretty much has the answer to your question, as first and foremost you'll need to duplicate your arrow.

 

Place the two arrows so that one of them is visible and one of them is placed "off-canvas", and then tween the visible one out of view, while at the same time tweening the not-visible one into view.

 

This thread here has a couple of approaches / demos you could have a look at.

 

Give it a shot yourself and if you get stuck along the way, please post back with a minimal demo of what you have tried - that makes it a lot easier to help thoroughly. Cheers.

 

 

 

 

 

[Toliy36]

Thanks! I hoped there was a property for that specifically so I didn't have to do it manually 😅