u/nitrospectide

I am working out the best way to duplicate an animation to create similar, but different movements. The animation is simple:

https://reddit.com/link/1vhg9cb/video/v4720eazdthh1/player

In the first one above, I created the layout, then animated the left arrow and square. Then to animate the second and third, I...

1. Copied the keyframe span for the slide/fade on the square, and pasted it onto the layer for the second and third squares.
2. Copied the keyframes animating the first arrow stem, and pasted onto the layers for the second and third.
3. Duplicated the arrow head and Pathfinder layers, moved the copies over to the second, and rewired the arrow stem, arrow head, and pathfinder to all interlink the same way as #1, but between the assets for #2. Tedious and inefficient, but it helped me learn the connections. I then did the same again for #3.
4. Slide the clips for each set to stagger them in time so they are sequential.

So then I tried a different approach in this next one, and now my arrow head positions are increasingly offset in the X dimension.

https://reddit.com/link/1vhg9cb/video/p7929sr3ethh1/player

1. I duplicated the full group for #1, and moved it into position to be #2, and reworked the points in the arrow stem to fit the new instance.
2. I then did the same for #3.

The plan was to then insert the new images, slide the clips to fix the relative timing on everything (staggered instead of simultaneous) and be done. Much faster, and less crazy-making than duping individual layers and rewiring everything. The upside is that duping as a group kept the internal wiring relationships, so everything connects properly to the copy within its group. A HUGE time and sanity saver. BUT - now the arrowhead on #1 is in the right spot, the arrow head on #2 is offset horizontally, and the arrow head on #3 is offset twice as much.

It looks like the duplicates still share the same origin/pivot, and moving each to the right created an offset that repositioned the arrowhead.

What has gone wrong, and how do I fix/prevent it?

I'm new to Cavalry, and trying to work out the best approach on some key things. If I have a little animation I want to do on text headlines, like some lines, a wipe, etc... and I want to do it on all the headlines in my whole animation, what is the best way to "package" that so that I am re-using, instead of individually building each, or just copy/pasting some assets for each right on the main timeline? Is the right way to make a composition out of the set of assets? How do I handle the fact that each instance needs customizations, like the headline text? Conversely, while some things need to be changed in each instance, can I also keep the compositions linked so that if I change say, a color in the main one, all of them update?

This was such a frustrating episode that I'm putting this solution out there in case it can save someone else a headache. I know the WPBakery editor is not as popular anymore, but many of us have legacy sites that are committed to it.

THE PROBLEM: All blog posts on our site are pulling in the content of a specific post where we mange content/layout of the shared header that goes on top of each blog post. Simple operation, and it works fine, until I fire up the WPBakery front end editor. In the front end editor, the layout blows up where the content appears early on the page, before the featured image and title/headline, which should actually be first. This made the front end editor useless for in-place WYSIWYG editing on these posts.

THE SOLUTION: The pulled-in content is just incompatible with the WPB front end editor, so we used a set of checks sees if the front-end editor is in use, and omit the pulled-in content. A workaround, but it solves the problem.

<?php
$section_page_header_id = 36437; // The post with the header layout in it

$is_wpbakery_editor =
    ( function_exists( 'vc_is_frontend_editor' ) && vc_is_frontend_editor() )
    || ( function_exists( 'vc_mode' ) && vc_mode() === 'page_editable' )
    || isset( $_GET['vc_editable'] )
    || isset( $_GET['vc_action'] );

if ( ! $is_wpbakery_editor ) {
    // Get the shared header layout
    $header_content = get_post_field( 'post_content', $section_page_header_id );

    if ( $header_content ) {
        // Output the shared header layout
        echo do_shortcode( do_blocks( $header_content ) );
    }
}
?>  

MY COMMENTARY: This is a frustrating bug, and the front end editor seems to be doing some weird things behind the scenes. I had already decided I wanted to just do a check & omit, but WPB support was not helpful. 1) I had to come up with this basic check/omit approach - they didn't bring it up, even though I was stuck. And 2) the check they gave me after I asked did not work. This had to be constructed on my own dime. This feels like a lot of support these days where it seems like the priority is to bring the interaction to a close more than it is to solve the problem.

Hopefully, this is useful to someone.