Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vit792

MotionPath Plugin with offsetX and Y

Recommended Posts

.Hello guys, 

I'm here because I'm struggling with an animation I'm making.

 

Basically I've got two SVG, one is the paths one is the image made of many small pieces.

 

Each piece should follow a single path to then return to the original position to be able to see the full picture all together.

 

I'm using Angular and there's a function to get piece's offsets X and Y that return the number.

 

It happens strangely that, whenever I put the offset the pieces aren't visible, they disappear, while with the inspection and console in the browser they are shown somewhere in the page.

 

I'm adding the two files as attachments, one .ts and one .html

 

The final effect as I said is with a timeline to start moving every single piece following a certain path into the original position, all starting at the same time, to recreate the initial image.

 

The image is made of subdivisions of <g> <image base64> all called by Id="cls-number"

 

And the rectangul that I'd like to move is defined at the beginning in a tag called <def> you'll see in the attachment.

 

I couldn't find any solution

 

I tried using in the path property both the SVG path and the ID of the element,  

the <g> <image base64 > is not even shown in the inspection with a certain position.. so I could catch them only from <Def>  --><tag id ="clip-path-number" >    --> <rect> 

 

Now they disappear, making some trials with a div instead and writing.. 

In the tl.to {( "div" ... path: "#A",

                                       align: "#A" you can see it moving without getting to the initial position

 

 

Is it because the paths and the SVG image are different and I should link the paths and the pieces with Illustrator?

 

Is there another faster solution?

 

Thank you so much, I appreciate your time.  

 

Files as attachments

 

 

Update

 The html file is too large I'll put here snippets

 

<div>
    <div
        id="P1"
        style="
            z-index: 3;
            background-color: red;
            position: absolute;
            top: 400px;
            left: 200px;
            display: block;
            height: 50px;
            width: 50px;
        "
    >
        CIAO
    </div>
    <svg
        style="width: 80%; height: auto; opacity: 0.85; overflow: visible"
        id="glass"
        data-name="Layer 1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="0 0 827.76 470.16"
    >
        <defs>
            <style>
                #cls-1 {
                    fill: none;
                }

                #cls-2 {
                    clip-path: url(#clip-path);
                }

                #cls-3 {
                    clip-path: url(#clip-path-2);
                }

                #cls-4 {
                    clip-path: url(#clip-path-3);
                }

                #cls-5 {
                    clip-path: url(#clip-path-4);
                }

Etc.. till #cls-34

            </style>
            <clipPath id="clip-path" transform="translate(-180.48 -157.92)">
                <rect class="cls-1" width="1224" height="792" />
            </clipPath>
            <clipPath id="clip-path-2" transform="translate(-180.48 -157.92)">
                <rect
                    class="cls-1"
                    x="201.84"
                    y="178.08"
                    width="98.4"
                    height="100.56"
                />
            </clipPath>
            <clipPath id="clip-path-3" transform="translate(-180.48 -157.92)">
                <rect
                    class="cls-1"
                    x="185.28"
                    y="216"
                    width="102.96"
                    height="139.92"
                />
            </clipPath>
            <clipPath id="clip-path-4" transform="translate(-180.48 -157.92)">
                <rect
                    class="cls-1"
                    x="261.36"
                    y="172.56"
                    width="107.52"
                    height="140.16"
                />
            </clipPath>
            <clipPath id="clip-path-5" transform="translate(-180.48 -157.92)">
                <rect
                    class="cls-1"
                    x="359.28"
                    y="178.56"
                    width="151.68"
                    height="137.28"
                />

Etc..

 

With then..

 

</defs>

        <title>broken_pieces</title>

        <g class="cls-2">

            <g id="cls-3">

                <image

                    width="410"

                    height="419"

                    transform="translate(21.36 20.16) scale(0.24)"

                    xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZoAAAGjCAYAAAAVc9MGAAAACXBIWXMAAC4jAAAuIwF4pT92AAAgAElEQVR4Xuy9W6ws2Xnf919V1d1773POTEgOZ0aKRFKiQEq0EIWKQkg8IWcOowTkg2HoxQjgAHkIgrxQLwngB79ISYA8ODAMR

 

Etc.. /> repeated many times

 

</SVG>

 

 

And the SVG of the paths is this 

 


    <svg
        style="position: absolute; top: -350; left: 50"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1177.544 1177.689"
    >
        <defs>
            <style>
                .clss-1,
                .clss-2 {
                    fill: #fff;
                    visibility: hidden;
                }

                .clss-1,
                .clss-3 {
                    stroke: #000;
                    stroke-miterlimit: 10;
                }

                .clss-3 {
                    fill: none;
                    visibility: hidden;
                }
            </style>
        </defs>
        <title>motionPath</title>
        <g data-name="Layer 1">
            <path
                id="A"
                class="clss-1"
                d="M529.5,591.5c22.669-75.258,103.207-307.484,330-432,277.264-152.226,678.576-91.563,743,75,38.4,99.286-44.809,231.264-133,296-167.08,122.644-443.526,71.105-493-57-33.461-86.642,31.011-223.557,139-270,74.81-32.174,196.507-32.112,239,42,29.286,51.078,7.086,113.146,0,131"
                transform="translate(-512.872 232.263)"
            />
        </g>
        <g id="B" data-name="Layer 2">
            <path
                class="clss-1"
                d="M615.826,731.494c5.364-78.415,32.238-322.736,225.659-494.573C1077.95,26.844,1482.7-3.263,1582.557,144.8c59.521,88.259,7.746,235.437-63.839,318.166-135.62,156.731-416.6,167.965-493.33,54.07-51.892-77.03-19.484-224.855,75.471-294.151,65.781-48.006,184.444-75.01,242.355-12.2,39.913,43.285,32.073,108.736,29.135,127.719"
                transform="translate(-512.872 232.263)"
            />
        </g>

 

 

Repeated till...   Id="ZD"

 

Can someone help me figuring this out?

 

Thanks a lot

 

welcome-view.component.ts

Link to post
Share on other sites

Hi there!

 

I would love to help with this. Would you be able to make a stripped back demo in codepen so we can help you debug?
 

 

  • Like 2
Link to post
Share on other sites

Sure!

 

Thanks for replying so fast as well! ☺️😃

 

I'll do it in some time today..

 

As I said my project is made with Angular, I'll replicate it with JavaScript if there's no chance to run Angular, maybe in this I'll keep it easy just showing the basic code for it.

 

 

P.S. the image I've got is super long, the base 64 image in the SVG are kilometric but that's what I've got, I received this file from someone else to make the animation

Link to post
Share on other sites

How do I add GSAP into code pen?

 

Is there a way?

Link to post
Share on other sites

If you go to the settings panel you can add libraries

Here's a starter pen with all the links - 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen



Also, I would start off by getting rid of the base 64 image and adding a image tag in the SVG, it'll be a lot less confusing to work with - https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

  • Like 2
Link to post
Share on other sites

And yeah, I'd recommend starting off getting the basic demo working then angular-ize it. :) 

  • Like 1
Link to post
Share on other sites

See the Pen JjENaRM by vittorio792 (@vittorio792) on CodePen

 

Here it is the code, it's been summarized because as you can see the first bit every image is giant..

 

 

Link to post
Share on other sites

Awesome! It's dinner time for me but I'll check this out tomorrow am :) 

Thanks for putting this together.

  • Like 1
Link to post
Share on other sites

No worries here it's almost time to go sleeping I'll see tomorrow, 

 

just to be clear, the best result would be that this pieces travel all the way to the position in the top left corner following the second SVG path.

 

In the js there's also the code for the path in an alternative way to write it as it's explained on the gsap documentation, you'll find const pathA =" ...... Stuff "

 

Link to post
Share on other sites

I just checked the result and the pieces appear at some point while there should be the impression they traveled along the #A #B #C paths to get into their position, they're curvy paths

Link to post
Share on other sites

Ok pal! I've simplified this down a lot for demo purposes.

1) You were trying to animate rectangles within clip paths. I assume you wanted to target and animate the actual elements themselves? This is why stuff was disappearing (the clipping area was moving). I've removed the c lip paths as they didn't seem to be having any other effect. Apologies if you were intending to use the clip paths in some way and I've misread this.

2) Tidy tidy tidy - There is so much going on - Inline styles, styles in CSS, styles as presentation attributes, inline transforms, base 64 stuff, unused clip paths,  No wonder you're confused. For a start I'd get rid of that base 64 stuff and just pop the images right in like this. -     

<image xlink:href="image.png" id="cls-5" />

 

SVGOMG is also lovely for tidying up SVG code

3) You can use alignOrigin: [0.5, 0.5]to align items on the motion path - you shouldn't need to use offsets in the way you are currently. Again apologies if I've misread.

From this example it seems to be working fine - so I don't think this is a GSAP issue - more a need to do some tidying up and target the right elements.

See the Pen 4c1c10188b3e3023d4294086144a7eef by cassie-codes (@cassie-codes) on CodePen



Hope this helps!

  • Like 5
Link to post
Share on other sites

Wow! That's wonderful! Yeah in regards to the offset I put those properties because with a previous simpler animation I made the SVG for it seemed the pieces weren't fitting perfectly in the final position, and I thought putting a precise offset could help.

 

It's very helpful the piece.png you made!

It simplifies the code a lot!

 

I'll make the png from Illutrator!!!

 

I really really thanky you, you've been helpful a lot

 

 

I know the code was a mess in the code I put where all the things I tried so far, and unneeded styles.

 

 

Just one question, will this align the piece to fit in the position it's supposed to be? 

 

I thought of using offset X and Y for this reason, so that the pieces built in the end the original image, in your example the code seems to be working fine but it's not clear if the piece goes where it's supposed to.

Thank you

 

I'll try this code, I'm on the train for some hours, I'll let you know how it goes

  • Like 1
Link to post
Share on other sites

You can also just right click in the browser and save the image if you don't want to export again, that's what I did!

In terms of aligning the piece to fit where it's supposed to there are a few options for alignment. You can say (as you are) align: path which  will align the element with the path, or you can say align:self which will align the path with the element - (think of it as moving the path to the element rather than the element to the path)

One of these should do the job.

You are working in two coordinate spaces though (two SVG's), which Greensock should be able to handle. But if you come across any issues it may help to have the paths and the elements within one SVG. I tend to do this when possible to make life easier and the code easier to port and read.

  • Like 1
Link to post
Share on other sites

No, these two options didn't work.

 

What worked is to use the code of the path plus the offset brought by getOffset function returning 

 

window.top + element

 

With the approach you showed there was a movement but it was following the path of the #A...etc... SVG, so it was not fitting into the right final position.

 

Now it almost goes at the right spot, for sure getOffsetX works, not Y for some reasons but I've got to now as I got off the train.

 

I'll update how it goes and show the final result with a video

 

 

Thanks for helping me

 

  • Like 1
Link to post
Share on other sites

I confirm, neither of our own ways can work.

 

The way would be without using offset and doing it this way.

motionPath: {

                  path: '#A'

                  align: '#A'

                  alignOrigin: '#A'

              

etc...

 

But with the difference that it comes in one single SVG where paths and pieces are manually connected with illustrator on the top left corner of the rectangul containing the shape

 

Doing so the effect where at the end of the motion the image comes together would come well.

 

I tried it, it works

 

I'll post the result at the end of it

Link to post
Share on other sites

Yep, it's always the easiest route to set everything up nicely in one SVG to start off with!

Glad you figured it out. Good job!

  • Like 3
  • Haha 1
Link to post
Share on other sites

Thank you for helping me at this, was afraid but to come with a fast solution.

  • Like 1
Link to post
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.

×