Jump to content


Duplicate element on animation

Moderator Tag
Go to solution Solved by akapowl,

Recommended Posts

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


Link to comment
Share on other sites

  • Solution

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.






  • Like 4
Link to comment
Share on other sites

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

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