Jump to content
Search Community

Multiple motionPath and ScrollTrigger animation sequentially on same element

Mauro.ie31 test
Moderator Tag

Recommended Posts

Hi there,

probably I have problem understanding scrolltrigger sequence on animation on same element.

So, I have this first animation, using motionpath, that starts from bottom and arrive at center of the green circle of the example, with this code:
 

**
             * First animation
             */
            gsap.to("#div", {
                duration: 5,
                repeat: 0,
                repeatDelay: 0,
                yoyo: false,
                opacity: 1,

                ease: "power1.inOut",
                motionPath: {
                    path: "#path",
                    align: "#path",
                    autoRotate: true,
                    alignOrigin: [0.55, 0.55],
                    start: 0.5,
                    end: 0,
                },
                scrollTrigger: {
                    trigger: "#areas-el-content",
                    start: '-100% top +=200',
                    end: '+=600',
                    scrub: 1,

                }
            });


On the second animation, I'll make the #div element complete the path on the green circle.

I want that this happens after the end of first animation plus 100px scroll.

I don't know hot to proper set the start and end in the Second Animation Scroll Trigger and I don't know if it is the correct way to apply it.

Thanks for your help.

In the codepen there is an example.
 

See the Pen dyXaXod by mauroie31 (@mauroie31) on CodePen

Link to comment
Share on other sites

Specifically,

I have this pinned container: 
 


            gsap.to('#areas-el-content', {
                scrollTrigger: {
                    trigger: '#areas-el-content',
                    start: '-100% top',
                    end: '+=3500',
                    pin: true,
                    scrub: 1,
 

                },
            });

This Pinned container, last 3500 px scroll (end: +=3500) from the start.

In this case I want to apply different animations on different height of pinned content.

- First animation starts at 200px and finish at 800px of the pinned content scrolled.
- Second animation, applied on the same element, starts at 900px and finish at 1400px of the pinned content scrolled.

Link to comment
Share on other sites

Hey @Mauro.ie31

 

This example uses a scroll trigger and a timeline to manage the sequences:
with a scroll value of 3000 (end: '+ = 3000') and a total duration of the timeline of 3 sec, 1 sec corresponds to 1000 px.
You can of course change the duration of the tween or the position of the second tween

- and thus the relationship to each other.

 

See the Pen 6cb1afa6beafbd765d9def51e90fd297?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

55 minutes ago, mikel said:

Hey @Mauro.ie31

 

This example uses a scroll trigger and a timeline to manage the sequences:
with a scroll value of 3000 (end: '+ = 3000') and a total duration of the timeline of 3 sec, 1 sec corresponds to 1000 px.
You can of course change the duration of the tween or the position of the second tween

- and thus the relationship to each other.

 

 

 

 

Happy scrolling ...

Mikel

 

 

Wonderful.

Thanks for your help. 

Link to comment
Share on other sites

 

2 hours ago, mikel said:

Hey @Mauro.ie31

 

This example uses a scroll trigger and a timeline to manage the sequences:
with a scroll value of 3000 (end: '+ = 3000') and a total duration of the timeline of 3 sec, 1 sec corresponds to 1000 px.
You can of course change the duration of the tween or the position of the second tween

- and thus the relationship to each other.

 

 

 

 

Happy scrolling ...

Mikel

 

 

Sorry, but why if I put a normal div inside, external from the svg, it doesnt follow the circlePath?

Then I apply the transform to "#div" insthead of #small

        <svg id="greenCircles" viewBox="0 0 300 200">

            <circle v-on:click="readMore()" cx="300" cy="100" r="100" stroke="none" fill="#53877e" />
            <g >
                <circle cx="400" cy="100" r="20" stroke="none"  />
            </g>
            <circle id="circlePath" cx="300" cy="100" r="100" stroke="none" fill="none" />
        </svg>

        <div id="div" style="height:10em; width: 10em; border-radius:100%; background-color:red"></div>
Link to comment
Share on other sites

4 hours ago, mikel said:

Hey @Mauro.ie31,

 

Combining all relevant elements in one SVG makes perfect sense.

All relations are defined and are flexible / responsive overall (viewBox).

 

What is the reason to use a separate element?
Please show your case in a CodePen.

 



I need to apply a transformation to the entire svg, but mantaining the secondary element (the red one in the codepen example) at the same position.

Is there a way to apply the transform only to the big green element?

Thanks

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.
×
×
  • Create New...