Copy & Paste Animations

Design help Animations & Interactions
#1

Hello.

Quick question, I would like to know if it’s easy to copy and paste animation settings onto a new picture or div block? Or do you have to re-do the animation each time.

Thank you.

#2

Hello!

Brandon here with the Webflow Customer Support Team!

I will be happy to help you with your issue regarding question about copy/paste interactions.

If they are of the same class then you would just need to connect each instance of the animation to the elements in question.

If you want to use the interaction on a different element, then you will first need to duplicate the interaction, name it appropriately, and then make sure to connect to the elements that you want the interaction to work on.

@sabanna did I answer this right?

Please let me know if you have any other questions,

~ Happy Designing ~

2 Likes
#3

Thanks @QA_Brandon! You are pretty much correct.

The answer to you question, @DroneMotion depends on what you mean by “copy and paste animation settings”.

  • If you have an animation that is affecting element classes, and you have the similar elements/layout in some other place (other section or other page) then you can simple re-use the animation that you created earlier
  • If you have an animation that you like (actions, effects, etc) and you want to apply similar effects on elements in the other area (section, page, etc) but those elements are having different class or structure, then you will need to do several easy steps:
    a) Duplicate the Action List
    b) Open that action list for editing
    c) Change Target on every action (right click+change target)
    It will re-connect existing actions(effects) to a new elements

P.S.

  • You can’t copy-paste Actions from one Animation to another.
  • You can copy/paste element that has an Animation applied to (such elements have little lightning icon next to their title in the Navigator) and it should copy the Animation with it, but make sure that affected elements are still exist on the page (or re-target actions to new elements)

Hope it helps.

Cheers,
Anna

2 Likes
#4

Hi,

How does this work when applying animations from one template to another?

i. e, I am able to copy the section element “top of page” button, but the animation tied to it does not carry over.

Thanks!

#5

Hi Brandon,

i find this section a bit confusing. How exactly would you connect the interaction to another element?

Cheers, Chris.

#6

No. I think what OP is referring to is animation presets…like in Adobe Premiere or After Effects. I think it’s a really worthwhile idea. To be able to load pre-built animation presets from a marketplace library into your project, target the affected classes, and publish - would be a HUGE boost to creativity and efficiency in Webflow projects. +1

2 Likes